JS对节点的操作

1）创建新节点

　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementsByClassName() //通过class来获取DOM节点
　　getElementById() //通过元素Id，唯一性

实例：增加节点

1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <div id="div1">
 7 <p id="p1">这是一个段落</p>
 8 <p id="p2">这是另一个段落</p>
 9 </div>
10 </head>
11 
12 <body>
13 <script>
/*创建一个新的DOM节点*/
var dom=createDocumentFragment("div");
14 /*1.创建新的<p>元素*/
15 var para=document.createElement("p");
16 /*2.（此段代码创建了一个文本节点）*/
17 var node=document.createTextNode("这是新段落");
18 /*向<p>元素追加这个文本节点*/
19 para.appendChild(node);
20 /*最后您必须向一个已有的元素追加这个元素*/
21 /*3.这段代码找到一个已有的元素*/
22 var element=document.getElementById("div1");
23 /*4.这段代码向这个已有的元素追加新元素*/
24 element.appendChild(para);
25 </script>
26 </body>
27 </html>

实例：删除节点

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6 <p id="p1">这是一个段落。</p>
 7 <p id="p2">这是另一个段落。</p>
 8 </div>
 9 
10 <script>
11 /*找到父元素*/
12 var parent=document.getElementById("div1");
13 /*找到子元素*/
14 var child=document.getElementById("p1");
15 /*将子元素从父元素中删除*/
16 parent.removeChild(child);
17 </script>
18 
19 </body>
20 </html>

猜你喜欢