常用DOM API总结

一. 获取节点

1. 获取元素节点

getElementsById

getElementsByTagName

getElementsByClassName

2. 获取属性节点

getAttribute

3. 获取子节点

childNodes属性 // 获取所有子节点, 包括换行

firstChild属性

lastChild属性

previousElementSibling属性 // 获取相邻上一个节点

nextSibling属性 // 获取相邻下一个节点

parentNode属性 // 获取父节点, 包括父节点的所有子节点

二. 获取节点类型

nodeType属性

拓展: 常见节点类型

元素 1
属性 2
文本 3
注释 8
文档, 即document对象 9

三. 创建节点

createElement

createAttribute // 创建属性节点, 之后可以使用value属性赋值

createTextNode

cloneNode // 赋值节点, true保留子节点 false不保留子节点

四. 添加节点

appendChild // 在元素节点内部的最后, 附加一个子节点(通常是元素节点, 文本节点)

insertBefore // 插入一个与当前节点同级的新节点, 位置在当前节点的前面, 说明：document.insertBefore的使用方式是错误的, 一般情况下, 无法在根节点前插入元素

五. 删除节点

1. 元素, 文本节点

removeChild // 删除子节点

remove // 删除当前节点

2. 属性节点

removeAttribute

六. 设置节点

setAttributeNode // 为当前元素节点添加一个属性节点

appendChild // 为当前元素节点添加一个子节点

replaceChild // 替换当前节点的子节点

附: 测试代码

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title>Page Title</title>
  5     </head>
  6 <body>
  7     <div class="box1">
  8         <h2 id="title1">商品栏</h2>
  9         <ul id="goods"><li class="first">商品1</li><li>商品2</li><li>商品3</li><li class="last">商品4</li></ul>
 10     </div>
 11     <script>
 12         /* 获取已存在节点 */
 13         var h2Node1_exist = document.getElementById("title1");
 14         var liNode1_exist = document.getElementsByClassName("first")[0];
 15         var ulNode1_exist = document.getElementById("goods");
 16         var liNode2_exist = document.getElementsByTagName("li")[2];
 17 
 18         /* 创建新节点 */
 19         var liNode1 = document.createElement("li");
 20         var txtNode1 = document.createTextNode("halo");
 21         liNode1.appendChild(txtNode1);
 22 
 23     
 24         /* 获取节点
 25         console.log(document.getElementById("goods"));
 26         console.log(document.getElementsByTagName("li"));
 27         console.log(document.getElementsByClassName("last"));*/
 28 
 29 
 30         /* 创建节点
 31         // 1创建元素节点
 32         console.log(document.createElement("span"));
 33 
 34         // 2创建属性节点并赋值
 35         var attrNode = document.createAttribute("name");
 36         attrNode.value = "shaohsiung";
 37         console.log(attrNode);
 38         // 将属性节点设置到标签上
 39         h2Node1_exist.setAttributeNode(attrNode);
 40         console.log(h2Node1_exist);
 41 
 42         // 3创建文本节点
 43         var txtNode = document.createTextNode("halo world");
 44         // 将文本节点设置到标签体内
 45         h2Node1_exist.appendChild(txtNode);*/
 46 
 47 
 48         /* 添加节点
 49         // 添加子节点
 50         h2Node1_exist.appendChild(liNode1);
 51 
 52         // 某节点前插入节点
 53         // 说明：document.insertBefore的使用方式是错误的，无法在根节点前插入元素
 54         ulNode1_exist.insertBefore(liNode1, liNode1_exist); */
 55 
 56 
 57         /* 复制节点 
 58         // 不包含子节点
 59         var result1 = ulNode1_exist.cloneNode(false);
 60         console.log(result1);
 61 
 62         // 包含子节点
 63         var result1 = ulNode1_exist.cloneNode(true);
 64         console.log(result1);*/
 65 
 66 
 67         /* 删除节点
 68         // 删除子节点
 69         ulNode1_exist.removeChild(liNode1_exist);
 70         // 删除标签的属性
 71         ulNode1_exist.removeAttribute("id");
 72         // 删除当前节点
 73         ulNode1_exist.remove(); */
 74 
 75 
 76         /* 获取节点类型
 77         
 78         常见节点类型小结：
 79             元素 1
 80             属性 2
 81             文本 3
 82             注释 8
 83             文档, 即document对象 9 
 84          */
 85         //console.log(document.nodeType);
 86 
 87 
 88         /* 操作属性节点
 89         // 获取元素节点某个属性值
 90         console.log(h2Node1_exist.getAttribute("id"));
 91         // 为元素节点设置属性值
 92         h2Node1_exist.setAttribute("name", "shaohsiung");
 93         // 删除元素节点属性
 94         h2Node1_exist.removeAttribute("name"); */
 95         
 96 
 97         /* 查找节点
 98         // 获取ul标签所有子节点（包括换行）
 99         // 说明：要特别注意这里的换行
100         console.log(ulNode1_exist.childNodes);
101         
102         // 获取ul标签第一个子节点
103         console.log(ulNode1_exist.firstChild);
104 
105         // 获取ul标签最后一个子节点
106         console.log(ulNode1_exist.lastChild);
107         // 可递归调用， 这里获取到文本节点
108         console.log(ulNode1_exist.lastChild.lastChild); */
109 
110 
111         /* 获取相邻的节点
112         // 上一个
113         console.log(liNode2_exist.previousElementSibling);
114         // 下一个
115         console.log(liNode2_exist.nextSibling); */
116 
117         
118         // 获取父节点
119         // 说明：包括父节点的所有子节点
120         console.log(liNode2_exist.parentNode);
121 
122         // 替换当前节点的子节点
123         ulNode1_exist.replaceChild(liNode1, liNode2_exist);
124     </script>
125 </body>
126 </html>

View Code