一. DOM 5. 节点属性 1）节点名称 nodeName 返回节点的名称 元素节点名称：大写的标签名 文本节点名称：#text 注释节点名称：#comment 属性节点名称：属性名称 document节点名称：#document 2）节点内容 值 nodeValue 返回节点的值 元素节点值：null或undefined 元素节点内容不能使用nodeValue获取， 要使用innerHTML获取或者设置 属性节点值：属性值 文本节点值：文本内容 注释节点值：注释内容 document节点值：null或undefined 3）节点类型 nodeType 返回节点的类型 数字 元素节点类型：1 属性节点类型：2 文本节点类型：3 注释节点类型：8 document节点类型：9 案例：（01.节点名称.html） 结构： <div id="h" class="hh">hello<!-- 你好 --></div> hahaha js： 1）获取div元素节点的名称并输出到控制台 2）获取div的id及class属性节点的名称并输出到控制台 3）获取文本hello节点的名称并输出到控制台 4）获取注释节点的名称并输出到控制台 5）获取document节点的名称并输出到控制台 案例：（02.节点的值.html） 结构： <div id="h" class="hh">hello<!-- 你好 --></div> js： 1）获取div元素节点值并输出到控制台 2）获取div的id及class属性节点值并输出到控制台 3）获取文本hello节点值并输出到控制台 4）获取注释节点值并输出到控制台 5）获取document节点值并输出到控制台 案例：（03.节点类型.html） 结构： <div id="h" class="hh">hello<!-- 你好 --></div> <div> <p name='q'></p> <p name='q'></p> <p name='q'></p> <p name='q'></p> </div> js: 1）获取div元素节点类型并输出到控制台 2）获取div的id属性节点类型并输出到控制台 3）获取文本hello节点类型并输出到控制台 4）获取注释节点类型并输出到控制台 5）获取document节点类型并输出到控制台二. 节点的常用操作 增删改查，DOM使用这些操作对节点进行增删改查 1. 增 1）创建标签 var div1 = document.createElement('div'); 2) 创建文本 var text1 = document.createTextNode('今天天气很好'); 3) 将文本放进标签 div1.appendChild(text1); 将div1放进body var body = document.body; body.appendChild(div1); 4) 插入子节点 在script标签前面插入div1 var script = document.getElementsByTagName('script')[0]; //插入元素div1到script前边去 body.insertBefore(div1,script); 案例：（04.添加子节点.html） 创建的页面结构如下： <body> <div class="d1" id="box"> <div>div2</div> <a href="http://www.baidu.com">前往百度</a> </div> <script></script> </body> 样式： d1 宽，高，背景色 2. 删除子节点 div1.removeChild(a1); 从父元素div1中删除a1元素 案例：（05.删除子节点.html） 结构： <div id="box"> <a href="">前往百度</a> <p>hello</p> <p>hh</p> <p>hhjsjsjs</p> <span>我是span</span> </div> js： 删除<p>hello</p>段落元素
3. 替换子节点 div1.replaceChild(newEle, oldEle); 从父元素div1中替换子元素oldEle为newEle 案例：（06.替换子节点.html） 结构： <div id="box"> <a href="">hahahaha</a> </div> js: 将a节点替换为p节点 <p>hello</p> 4. 克隆节点 clone 克隆 cloneNode() 克隆节点 克隆a1节点，生成a2新节点 var a2 = a1.cloneNode(false); 布尔参数： true：表示深复制，a1的所有属性，子节点全部克隆 false：表示浅复制，不会克隆子节点，默认就算是false。 注意：克隆只能克隆节点，不能克隆js对节点设置的内容，比如事件。 案例：（07.克隆节点.html） 结构： <div id="box"> <a href="#">hahaha</a> </div> js: 克隆a元素，插入到div的前面 测试只克隆元素，不能克隆事件。 5. 设置、删除、获取属性 attribute 属性 getAttribute 获取属性 获取div1的name属性 div1.getAttribute('name'); setAttribute 设置属性 设置div1的name属性值为qqq div1.setAttribute('name','qqq'); removeAttribute 移除name属性 div1.removeAttribute('name'); 案例：（08.属性操作.html） 样式： #div1{ 宽、高、背景色 } js： 1）创建页面结构如下： <div id="div1" name="lisi" age="33">今天天气很暖和</div> 2）div添加单击事件，删除id属性 3）获取age属性和name属性的值并输出 4）删除age属性，再输出age属性值。
作业：动态生成表格 结构： <button></button> <button></button> <div></div> 样式： .tab{ 宽度 边框 细边框 } js： 1）表格中的数据 定义数组，数组中的每个元素都是对象类型的，对象有两个属性分别是name和price 2）创建表格 为’create‘按钮添加单击事件 创建表格元素 为表格元素添加属性（id和class） 在表格中添加tr、td 遍历数组，有几个元素就需要创建几个tr元素，每创建一个tr需要创建tr下的所有td，通过遍历数组的对象元素来动态创建td，创建的td元素需要添加样式属性，属性包括（高度、水平垂直居中、边框、、），然后需要设置td的内容，最后将td放到tr中。 3）鼠标事件的处理 鼠标经过和离开tr 经过tr：改变tr的背景色 离开tr：恢复之前的背景色 4）删除表格 点击“delete”按钮，删除table 1）删除div中的子元素 2）设定div的innerHTML的内容为空
转载于:https://www.cnblogs.com/yangjingyang/p/10210460.html
