常用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> 7View Code<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>
常用DOM API總結