常用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>
