DOM2

最新推荐文章于 2022-07-25 19:00:30 发布

dazhi1770

最新推荐文章于 2022-07-25 19:00:30 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/yangjingyang/p/10210460.html

版权

一. 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的内容为空