JavaScript-DOM 基礎-NODE 接口-方法 · 地表最強JS文檔

[toc] # 每日單詞 # 方法 ## Node.prototype.appendChild() `appendChild` 方法接受一個節點對象作為參數，將其作為最后一個子節點，插入當前節點。 `appendChild` 返回新增的節點 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> window.onload = function() { var p = document.createElement("p"); var returnedNode = document.body.appendChild(p); console.log(returnedNode === p); console.log(document.body.lastChild === p); }; </script> </body> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> window.onload = function() { var p = document.createElement("p"); console.log("↓↓↓↓↓↓ document.body.appendChild(p) ↓↓↓↓↓↓"); console.log(document.body.appendChild(p)); console.log(document.body.lastChild); }; </script> </body> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> window.onload = function() { var element = document .createElement("div") .appendChild(document.createElement("b")); console.log("↓↓↓↓↓↓ element ↓↓↓↓↓↓"); console.log(element); }; </script> </body> </html> ``` 如果參數節點是 DOM 已經存在的節點，appendChild 方法會將其從原來的位置，移動到新位置。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <ul> <li>this is li0</li> <li>this is li1</li> <li>this is li2</li> <li>this is li3</li> <li>this is li4</li> <li>this is li5</li> <li>this is li6</li> <li>this is li7</li> <li>this is li8</li> <li>this is li9</li> </ul> <script> window.onload = function() { var oUl = document.getElementsByTagName("ul")[0]; var oLi = document.getElementsByTagName("li")[0]; oUl.appendChild(oLi); }; </script> </body> </html> ``` ## Node.prototype.hasChildNodes() `hasChildNodes` 方法返回一個布爾值，表示當前節點是否有子節點。注意，子節點包括所有類型的節點，并不僅僅是元素節點。哪怕節點只包含一個空格，`hasChildNodes` 方法也會返回 `true`。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1">div1</div> </body> <script> window.onload = function() { oDiv = document.getElementById("div1"); console.log(oDiv.hasChildNodes()); }; </script> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"></div> </body> <script> window.onload = function() { oDiv = document.getElementById("div1"); console.log(oDiv.hasChildNodes()); }; </script> </html> ``` 判斷一個節點有沒有子節點，有許多種方法，下面是其中的三種。 1. `node.hasChildNodes()` 2. `node.firstChild !== null` 3. `node.childNodes && node.childNodes.length > 0` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"></div> </body> <script> window.onload = function() { oDiv = document.getElementById("div1"); console.log(oDiv.firstChild !== null); }; </script> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1">11111</div> </body> <script> window.onload = function() { oDiv = document.getElementById("div1"); console.log(oDiv.childNodes && oDiv.childNodes.length > 0); }; </script> </html> ``` 遍歷全部節點 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1">11111</div> <script> window.onload = function() { function showChild(parent, callback) { callback(parent.nodeName + ":" + parent.nodeValue); if (parent.hasChildNodes()) { for ( var node = parent.firstChild; node; node = node.nextSibling ) { showChild(node, callback); } } } showChild(document.body, console.log); }; </script> </body> </html> ``` ## Node.prototype.cloneNode() `cloneNode` 方法用于克隆一個節點。它接受一個布爾值作為參數，表示是否同時克隆子節點。它的返回值是一個克隆出來的新節點。在參數為 true 的情況下，執行深復制，也就是復制節點及其整個子節點樹；在參數為 false 的情況下，執行淺復制，即只復制節點本身。復制后返回的節點副本屬于文檔所有，但并沒有為它指定父節點。因此，這個節點副本就成為了一個“孤兒”，除非通過 `appendChild`() 、 `insertBefore`() 或 `replaceChild`() 將它添加到文檔中 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <ul> <li>hello world0</li> <li>hello world1</li> <li>hello world2</li> <li>hello world3</li> <li>hello world4</li> </ul> </body> <script> window.onload = function() { var deepList = document .getElementsByTagName("ul")[0] .cloneNode(true); console.log(deepList.childNodes.length); var deepList = document .getElementsByTagName("ul")[0] .cloneNode(false); console.log(deepList.childNodes.length); }; </script> </html> ``` 該方法有一些使用注意點。 1. 克隆一個節點，會拷貝該節點的所有屬性，但是會喪失 `addEventListener` 方法和 `on`-屬性（即 `node.onclick = fn`），添加在這個節點上的事件回調函數。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <input type="button" value="click me" /> </body> <script> document.getElementsByTagName("input")[0].onclick = function() { console.log("hello world"); }; document.body.appendChild( document.getElementsByTagName("input")[0].cloneNode() ); </script> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <input type="button" value="click me" /> </body> <script> document.body.appendChild( document.getElementsByTagName("input")[0].cloneNode() ); aInput = document.getElementsByTagName("input"); for (var i = 0; i < aInput.length; i++) { aInput[i].onclick = function() { console.log("hello world"); }; } </script> </html> ``` 2. 該方法返回的節點不在文檔之中，即沒有任何父節點，必須使用諸如 `Node.appendChild` 這樣的方法添加到文檔之中。 3. 克隆一個節點之后，DOM 有可能出現兩個有相同 id 屬性（即 id="xxx"）的網頁元素，這時應該修改其中一個元素的 id 屬性。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: #ccc; margin: 20px; float: left; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> <script> oDiv1 = document.getElementById("div1"); oDiv2 = document.getElementById("div2"); var cloneDiv = document.getElementById("div1").cloneNode(); // cloneDiv.getAttributeNode("id").nodeValue = "div3"; cloneDiv.setAttribute("id", "div4"); document.body.appendChild(cloneDiv); oDiv1.onclick = function() { alert("hello world"); }; </script> </html> ``` ## Node.prototype.insertBefore() `insertBefore` 方法用于將某個節點插入父節點內部的指定位置。 `var insertedNode = parentNode.insertBefore(newNode, referenceNode);` `insertBefore` 方法接受兩個參數，第一個參數是所要插入的節點 `newNode`，第二個參數是父節點 `parentNode` 內部的一個子節點 `referenceNode`。 `newNode` 將插在 `referenceNode` 這個子節點的前面。返回值是插入的新節點 `newNode` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <h1>hello world</h1> </body> <script> window.onload = function() { var p = document.createElement("p"); p.innerHTML = "hello world"; document.body.insertBefore(p, document.body.firstChild); }; </script> </html> ``` 如果 `insertBefore` 方法的第二個參數為 null，則新節點將插在當前節點內部的最后位置，即變成最后一個子節點。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <h1>hello world</h1> </body> <script> window.onload = function() { var p = document.createElement("p"); p.innerHTML = "hello world"; document.body.insertBefore(p); }; </script> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <h1>hello world</h1> </body> <script> window.onload = function() { var p = document.createElement("p"); p.innerHTML = "hello world"; document.body.insertBefore(p, null); }; </script> </html> ``` 注意，如果所要插入的節點是當前 DOM 現有的節點，則該節點將從原有的位置移除，插入新的位置。就是, 擇出來, 插回去, 個數不變 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <h1>hello world</h1> <h2>hello world</h2> </body> <script> window.onload = function() { var h2 = document.getElementsByTagName("h2")[0]; document.body.insertBefore(h2, document.body.firstChild); }; </script> </html> ``` 由于不存在 insertAfter 方法，如果新節點要插在父節點的某個子節點后面，可以用 insertBefore 方法結合 nextSibling 屬性模擬。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </body> <script> window.onload = function() { var h1 = document.getElementsByTagName("h1")[0]; document.body.insertBefore( h1, document.getElementsByTagName("h3")[0].nextSibling ); }; </script> </html> ``` ## Node.prototype.removeChild() `removeChild` 方法接受一個子節點作為參數，用于從當前節點移除該子節點。返回值是移除的子節點。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </body> <script> var oh4 = document.getElementsByTagName("h4")[0]; oh4.parentNode.removeChild(oh4); </script> </html> ``` 如果參數節點不是當前節點的子節點，`removeChild` 方法將報錯。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> <div id="div1"></div> </body> <script> var oh4 = document.getElementsByTagName("h4")[0]; var oDiv = document.getElementById("div1"); oh4.parentNode.removeChild(oDiv); </script> </html> ``` 如何移除當前節點的所有子節點。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="top"> <h1> hello world0 <span>!!!!!!!</span> </h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> </body> <script> var element = document.getElementById("top"); while (element.firstChild) { element.removeChild(element.firstChild); } </script> </html> ``` 被移除的節點依然存在于內存之中，但不再是 DOM 的一部分。所以，一個節點移除以后，依然可以使用它，比如插入到另一個節點下面。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="top"> <h1> hello world0 <span>!!!!!!!</span> </h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> <div id="top2"></div> </body> <script> var element = document.getElementById("top"); var element2 = document.getElementById("top2"); while (element.firstChild) { var res = element.removeChild(element.firstChild); element2.appendChild(res); } </script> </html> ``` ## Node.prototype.replaceChild() `replaceChild` 方法用于將一個新的節點，替換當前節點的某一個子節點。 `var replacedNode = parentNode.replaceChild(newChild, oldChild);` 上面代碼中，`replaceChild` 方法接受兩個參數，第一個參數 `newChild` 是用來替換的新節點，第二個參數 `oldChild` 是將要替換走的子節點。返回值是替換走的那個節點 `oldChild`。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> </body> <script> var div1 = document.getElementById("div1"); var newSpan = document.createElement("span"); newSpan.textContent = "Hello World!"; div1.parentNode.replaceChild(newSpan, div1); </script> </html> ``` ## Node.prototype.contains() `contains` 方法返回一個布爾值，表示參數節點是否滿足以下三個條件之一。 1. 參數節點為當前節點。 2. 參數節點為當前節點的子節點。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> </body> <script> var div1 = document.getElementById("div1"); var h2 = document.getElementsByTagName("h2")[0]; console.log("↓↓↓↓↓↓ div1.contains(h2) ↓↓↓↓↓↓"); console.log(div1.contains(h2)); </script> </html> ``` 3. 參數節點為當前節點的后代節點。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> </body> <script> var div1 = document.getElementById("div1"); var h2 = document.getElementsByTagName("h2")[0]; console.log("↓↓↓↓↓↓ document.body.contains(h2) ↓↓↓↓↓↓"); console.log(document.body.contains(h2)); </script> </html> ``` 注意，當前節點傳入 contains 方法，返回 true。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> </body> <script> var div1 = document.getElementById("div1"); console.log("↓↓↓↓↓↓ div1.contains(div1) ↓↓↓↓↓↓"); console.log(div1.contains(div1)); </script> </html> ``` ## Node.prototype.isEqualNode()，Node.prototype.isSameNode() `isEqualNode` 方法返回一個布爾值，用于檢查兩個節點是否相等。所謂相等的節點，指的是兩個節點的類型相同、屬性相同、子節點相同。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> </body> <script> var div1 = document.getElementById("div1"); var div2 = document.getElementById("div1"); console.log(div1.isEqualNode(div2)); console.log(div1.isSameNode(div2)); </script> </html> ``` `isSameNode` 方法返回一個布爾值，表示兩個節點是否為同一個節點。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1"> <h1>hello world0</h1> <h2>hello world1</h2> <h3>hello world2</h3> <h4>hello world3</h4> </div> </body> <script> var div1 = document.createElement("div"); var div2 = document.createElement("div"); console.log(div1.isEqualNode(div2)); console.log(div1.isSameNode(div2)); </script> </html> ``` ## Node.prototype.normalize() `normailize` 方法用于清理當前節點內部的所有文本節點（text）。它會去除空的文本節點，并且將相鄰的文本節點合并成一個，也就是說不存在空的文本節點，以及相鄰的文本節點。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div></div> <script> window.onload = function() { var wrapper = document.createElement("div"); wrapper.appendChild(document.createTextNode("Part 1 ")); wrapper.appendChild(document.createTextNode("Part 2 ")); // console.log(wrapper.childNodes.length); // console.log(wrapper.childNodes); // console.log(wrapper.firstChild); // console.log(wrapper.firstChild.nextSibling); wrapper.normalize(); console.log(wrapper.childNodes.length); console.log(wrapper.childNodes); console.log(wrapper.firstChild); }; </script> </body> </html> ``` 上面代碼使用 normalize 方法之前，wrapper 節點有兩個毗鄰的文本子節點。使用 normalize 方法之后，兩個文本子節點被合并成一個。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div></div> <script> window.onload = function() { var wrapper = document.createElement("div"); wrapper.appendChild(document.createTextNode("Part 1 ")); wrapper.appendChild(document.createElement("P")); wrapper.appendChild(document.createTextNode("Part 2 ")); // console.log(wrapper.childNodes.length); // console.log(wrapper.childNodes); // console.log(wrapper.firstChild); // console.log(wrapper.firstChild.nextSibling); wrapper.normalize(); console.log(wrapper.childNodes.length);//3 console.log(wrapper.childNodes);//[text,p,text] console.log(wrapper.firstChild);//text }; </script> </body> </html> ``` ## Node.prototype.getRootNode() `getRootNode` 方法返回當前節點所在文檔的根節點，與 `ownerDocument` 屬性的作用相同。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div></div> <script> window.onload = function() { var res = document.body.firstChild.getRootNode() === document; console.log(res); var res1 = document.body.firstChild.getRootNode() === document.body.firstChild.ownerDocument; console.log(res1); }; </script> </body> </html> ```