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>