1

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>DOM对象控制HTML</title>

</head>

<body>

    <p name="pn">hello</p>

    <p name="pn">hello</p>

    <p name="pn">hello</p>

    <a id="aid" title="得到了a标签的属性">hello</a>

    <a id="aid2">aid2</a>

    <ul><li>1</li><li>2</li><li>3</li></ul>

    <div id="div">

        <p id="pid">div的P元素</p>

    </div>

    <script>

        function getName() {

            var count = document.getElementsByName("pn");

            alert(count.length);

            var p = count[2];

            p.innerHTML = "World";

        }

        function getAttr() {

            var anode = document.getElementById("aid");

            var attr = anode.getAttribute("id");

            alert(attr);

        }

        function setAttr() {

            var anode = document.getElementById("aid2");

            anode.setAttribute("title", "动态设置a的title属性");

            var attr = anode.getAttribute("title");

            alert(attr);

        }

        function getChildNode() {

            var childnode = document.getElementsByTagName("ul")[0].childNodes;

            alert(childnode.length);

            alert(childnode[0].nodeType)

        }

        function getParentNode() {

            var div = document.getElementById("pid");

            alert(div.parentNode.nodeName);

        }

        function createNode() {

            var body = document.body;

            var input = document.createElement("input");

            input.type = "button";

            input.value = "按钮";

            body.appendChild(input);

        }

        function addNode() {

            var div = document.getElementById("div");

            var node = document.getElementById("pid");

            var newnode = document.createElement("p");

            newnode.innerHTML = "动态添加体格p元素";

            div.insertBefore(newnode, node);

        }

        function removeNode() {

            var div = document.getElementById("div");

            var p = div.removeChild(div.childNodes[1]);

        }

        function getSize() {

            var width = document.body.offsetWidth || document.documentElement.offsetWidth;

            var height = document.body.offsetHeight;

            alert(width + " " + height);

        }

        getSize();

    </script>

</body>

</html>

4.8.2.JSDOM对象控制HTML元素详解的更多相关文章

  1. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  2. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  3. web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解

    1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素   getAttribute() 获取元 ...

  4. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  5. 史上最全web.xml配置文件元素详解

    一.web.xml配置文件常用元素及其意义预览 <web-app> <!--定义了WEB应用的名字--> <display-name></display-na ...

  6. asp.net中C#对象与方法 属性详解

    C#对象与方法 一.相关概念: 1.对象:现实世界中的实体 2. 类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装  继承 多态 二.类的定义与语法 1.定义类: 修饰符 类名称 ...

  7. java对象池commons-pool-1.6详解（一）

    自己的项目中用到了 对象池 commons-pool: package com.sankuai.qcs.regulation.protocol.client; import com.dianping. ...

  8. web.xml配置文件元素详解

    一.web.xml配置文件常用元素及其意义 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></disp ...

  9. JavaScript对象的property属性详解

    JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...

随机推荐

  1. Git基础及进阶-系统总结

    Git基础及进阶-系统总结 by 小强 2019-07-01 考虑到入职后不仅需要熟练掌握git的基本使用,在企业实际操作中还涉及一些进阶指令.作为一个程序员,熟练使用工具是一项基本技能,也是程序员的 ...

  2. Linux 目录结构与目录操作

    目录结构 Linux的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录"/",然后再次目录下再创建其他目录 在Linux系统中,一切皆文件 常见目录作用 / : 所有 ...

  3. PyQt5操作SQLite数据库

    1.操作SQLite数据库import sysfrom PyQt5.QtSql import QSqlDatabase,QSqlQueryfrom PyQt5.QtCore import * def ...

  4. ANSYS初始残余应力赋值

    目录 1.建模 2.划分网格并分组 3.所有节点固定约束 4.施加初始残余应力 5.结果 1.建模 建立有限元模型,采用SOLID185单元,模型尺寸0.050.050.02 材料为钢 !程序头 FI ...

  5. text-align:justify 失效问题。

    text-align:justify 失效问题. <div class="fmlist_left"> <p> <span> 品名 <i c ...

  6. Linux--如何通过图形界面选项快速更改ubuntu的窗口、图标、分辨率大小，超详细超实用~（适合所有人群）

    这是默认ubuntu给出的分辨率大小:800*600,说实话有点小不适合操作. (分辨率800*600) 这是调整后的分辨率大小. (分辨率1400*900) 操作方法: 首先点击选项框中的设置图标- ...

  7. vector的使用-Hdu 4841

    圆桌问题 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submis ...

  8. 08 DTFT变换的性质

    DTFT变换的性质 线性性质 设 \[ x[n]\xrightarrow{DTFT}X(e^{jw})\quad y[n]\xrightarrow{DTFT}Y(e^{jw})​ \] 则 \[ \ ...

  9. 一键绑定-提供一键动态绑定键盘输入的效果[C#制作]（2020年寒假小目标07）

    日期:2020.01.31 博客期:139 星期五 [需求部分] 嗯,其实我是找了一下网站,要实现按下一个键盘键可以按照顺序输出想要的多个键盘键,差不多就是这样的功能.为什么我会有想实现这样功能的想法 ...

  10. Scrapy 爬取动态页面

    目前绝大多数的网站的页面都是冬天页面,动态页面中的部分内容是浏览器运行页面中的JavaScript 脚本动态生成的,爬取相对比较困难 先来看一个很简单的动态页面的例子,在浏览器中打开 http://q ...