NodeList-接口-HTMLCollection-接口 · 地表最強JS文檔

[toc] # 每日英語 1. `collection` 收集/集合 2. `foreach` 循環 3. `entry/entries` 項目 4. `area` 區域 5. `map` 映射 6. `rectangular` 矩形 7. `coords` 坐標 # 什么是 NodeList 和 HTMLCollection 節點都是單個對象，有時需要一種數據結構，能夠容納多個節點。DOM 提供兩種節點集合，用于容納多個節點：`NodeList` 和 `HTMLCollection`。這兩種集合都屬于接口規范。許多 DOM 屬性和方法，返回的結果是 NodeList 實例或 HTMLCollection 實例。主要區別是，`NodeList` 可以包含各種類型的節點，`HTMLCollection` 只能包含 HTML 元素節點。 # NodeList 接口 ## 概述 `NodeList` 實例是一個類似數組的對象，它的成員是節點對象。通過以下方法可以得到 `NodeList` 實例。 - `Node.childNodes` - `document.querySelectorAll()`等節點搜索方法 `document.body.childNodes instanceof NodeList // true` `document.querySelectorAll('body') instanceof NodeList` `NodeList` 實例很像數組，可以使用 `length` 屬性和 `forEach` 方法。但是，它不是數組，不能使用 `pop` 或 `push` 之類數組特有的方法。 `Array.isArray(document.body.childNodes)` `document.body.childNodes.length` `children.forEach(console.log)` 上面代碼中，NodeList 實例 children 不是數組，但是具有 length 屬性和 forEach 方法。順便提一下`foreach` ```javascript var arr = [ "The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog" ]; arr.forEach(console.log); ``` 對象轉數組如果 NodeList 實例要使用數組方法，可以將其轉為真正的數組。 `var children = document.body.childNodes;` `var nodeArr = Array.prototype.slice.call(children);` ```javascript var arr = [ "The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog" ]; var obj = { 0: "xujunhao", 1: "good", 2: "man", length: 3 }; // var res = [].slice.call(obj); // console.log(res); var arr = []; for (var i = 0; i < obj.length; i++) { arr.push(obj[i]); } console.log(arr); ``` 除了使用 `forEach` 方法遍歷 `NodeList` 實例，還可以使用 `for` 循環。 ```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> <script> window.onload = function() { var obj = document.body.childNodes; for (var i = 0; i < obj.length; i++) { console.log(obj[i]); } }; </script> </head> <body> <div><span></span></div> </body> </html> ``` 注意，NodeList 實例可能是動態集合，也可能是靜態集合。所謂動態集合就是一個活的集合，DOM 刪除或新增一個相關節點，都會立刻反映在 NodeList 實例。目前，只有 Node.childNodes 返回的是一個動態集合，其他的 NodeList 都是靜態集合。 ```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> <script> window.onload = function() { var children = document.body.childNodes; console.log(children.length); document.body.appendChild(document.createElement("p")); console.log(children.length); }; </script> </head> <body> <div><span></span></div> </body> </html> ``` `document.querySelectorAll()`就不行... ```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> <script> window.onload = function() { var children = document.querySelectorAll("div"); console.log(children.length); document.body.appendChild(document.createElement("div")); console.log(children.length); }; </script> </head> <body> <div><span></span></div> </body> </html> ``` ## NodeList.prototype.length `length` 屬性返回 `NodeList` 實例包含的節點數量。 ```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> <script> window.onload = function() { var objLength = document.querySelectorAll("span").length; console.log(objLength); }; </script> </head> <body> <div><span></span></div> <div><span></span></div> <div><span></span></div> <div><span></span></div> <div><span></span></div> <div><span></span></div> </body> </html> ``` 對于那些不存在的 HTML 標簽，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> <script> window.onload = function() { var objLength = document.querySelectorAll("p").length; console.log(objLength); }; </script> </head> <body> <div><span></span></div> <div><span></span></div> <div><span></span></div> <div><span></span></div> <div><span></span></div> <div><span></span></div> </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> <script> window.onload = function() { var objLength = document.querySelectorAll("span").length; console.log(objLength); }; </script> </head> <body> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </body> </html> ``` ## NodeList.prototype.forEach() `forEach` 方法用于遍歷 `NodeList` 的所有成員。它接受一個回調函數作為參數，每一輪遍歷就執行一次這個回調函數，用法與數組實例的 `forEach` 方法完全一致。 ```javascript var children = document.body.childNodes; children.forEach(function f(item, i, list) { // ... }, this); ``` 上面代碼中，回調函數 f 的三個參數依次是當前成員、位置和當前 NodeList 實例。forEach 方法的第二個參數，用于綁定回調函數內部的 this，該參數可省略。 ```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> <script> window.onload = function() { document.body.childNodes.forEach(function(a, b, c) { console.log(b); }, this); }; </script> </head> <body> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </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> <script> window.onload = function() { document.body.childNodes.forEach(function(a, b, c) { console.log(this.childNodes.item(b)); }, document.getElementById("div1")); }; </script> </head> <body> <div id="div1"> <div><span111></span111></div> </div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </body> </html> ``` ## NodeList.prototype.item() `item` 方法接受一個整數值作為參數，表示成員的位置，返回該位置上的成員。 ```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> <script> window.onload = function() { console.log(document.body.childNodes.item(1)); }; </script> </head> <body> <div id="div1"> <div><span111></span111></div> </div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </body> </html> ``` 如果參數值大于實際長度，或者索引不合法（比如負數），item 方法返回 null。如果省略參數，item 方法會報錯。 ```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> <script> window.onload = function() { console.log(document.body.childNodes.item(111)); }; </script> </head> <body> <div id="div1"> <div><span111></span111></div> </div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </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> <script> window.onload = function() { console.log(document.body.childNodes.item()); }; </script> </head> <body> <div id="div1"> <div><span111></span111></div> </div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </body> </html> ``` 所有類似數組的對象，都可以使用方括號運算符取出成員。一般情況下，都是使用方括號運算符，而不使用 item 方法。 ```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> <script> window.onload = function() { console.log(document.body.childNodes[1]); }; </script> </head> <body> <div id="div1"> <div><span111></span111></div> </div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </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> <script> window.onload = function() { console.log(document.body.childNodes[11111]); }; </script> </head> <body> <div id="div1"> <div><span111></span111></div> </div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </body> </html> ``` ```javascript var arr = [ "The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog" ]; console.log(arr[11111]); ``` ## NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries() 這三個方法都返回一個 ES6 的遍歷器對象，可以通過 for...of 循環遍歷獲取每一個成員的信息。區別在于，keys()返回鍵名的遍歷器，values()返回鍵值的遍歷器，entries()返回的遍歷器同時包含鍵名和鍵值的信息。 ```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> <script> window.onload = function() { var children = document.body.childNodes; for (var key of children.keys()) { console.log(key); } for (var value of children.values()) { console.log(value); } for (var entry of children.entries()) { console.log(entry); } }; </script> </head> <body> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> <div><span111></span111></div> </body> </html> ``` # HTMLCollection 接口 ## 概述 `HTMLCollection` 是一個節點對象的集合，只能包含元素節點（`element`），不能包含其他類型的節點。它的返回值是一個類似數組的對象，但是與 `NodeList` 接口不同，HTMLCollection 沒有 `forEach` 方法，只能使用 `for` 循環遍歷。返回 `HTMLCollection` 實例的，主要是一些 `Document` 對象的集合屬性，比如 `document.links、docuement.forms、document.images` 等。 ### document.links links 集合返回當期文檔所有鏈接的數組。提示： links 集合計算 <a href=""> 標簽和 <area> 標簽。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> </map> <p><a href="http://www.baidu.com">百度一下</a></p> <p> 鏈接/地址數目: <script> document.write(document.links.length); </script> </p> </body> </html> ``` ### docuement.forms forms 集合可返回對文檔中所有 Form 對象的引用。 ```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> <form name="Form1"></form> <form name="Form2"></form> <form name="Form3"></form> <script> document.write("This document contains: "); document.write(document.forms.length + " forms."); </script> </body> </html> ``` ### document.images `images` 集合可返回對文檔中所有 Image 對象的引用。 ```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> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg" /> <br /> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg" /> <br /> <br /> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg" /> <br /> <br /> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg" /> <br /> <br /> <script type="text/javascript"> document.write("This document contains: "); document.write(document.images.length + " images."); </script> </body> </html> ``` `document.links instanceof HTMLCollection` `HTMLCollection` 實例都是動態集合，節點的變化會實時反映在集合中。 ```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> <script> window.onload = function() { var htmlForms = document.forms; var nodeForms = document.body.childNodes; console.log(htmlForms.length); console.log(nodeForms.length); document.body.appendChild(document.createElement("form")); console.log(htmlForms.length); console.log(nodeForms.length); }; </script> </head> <body> <form name="Form1"></form> <form name="Form2"></form> <form name="Form3"></form> </body> </html> ``` 如果元素節點有 `id` 或 `name` 屬性，那么 `HTMLCollection` 實例上面，可以使用 id 屬性或 name 屬性引用該節點元素。如果沒有對應的節點，則返回 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> <img src="haha.jpg" alt="" id="img1" /> <script> window.onload = function() { console.log(document.images.img1); console.log(document.images.img1.src); }; </script> </body> </html> ``` 上面代碼中，document.images 是一個 HTMLCollection 實例，可以通過<img>元素的 id 屬性值，從 HTMLCollection 實例上取到這個元素。 ## HTMLCollection.prototype.length `length` 屬性返回 `HTMLCollection` 實例包含的成員數量。 ```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> <a href="">0</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> <a href="">9</a> <a href="">10</a> <a href="">11</a> <a href="">12</a> <a href="">13</a> <a href="">14</a> <a href="">15</a> <a href="">16</a> <a href="">17</a> <a href="">18</a> <a href="">19</a> <a href="">20</a> <script> window.onload = function() { console.log(document.links.length); }; </script> </body> </html> ``` ## HTMLCollection.prototype.item() `item` 方法接受一個整數值作為參數，表示成員的位置，返回該位置上的成員。由于方括號運算符也具有同樣作用，而且使用更方便，所以一般情況下，總是使用方括號運算符。如果參數值超出成員數量或者不合法（比如小于 0），那么 item 方法返回 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> <a href="">this is tag a 0</a> <br /> <a href="">this is tag a 1</a> <br /> <a href="">this is tag a 2</a> <br /> <a href="">this is tag a 3</a> <br /> <a href="">this is tag a 4</a> <br /> <a href="">this is tag a 5</a> <br /> <a href="">this is tag a 6</a> <br /> <a href="">this is tag a 7</a> <br /> <a href="">this is tag a 8</a> <br /> <a href="">this is tag a 9</a> <br /> <a href="">this is tag a 10</a> <br /> <a href="">this is tag a 11</a> <br /> <a href="">this is tag a 12</a> <br /> <a href="">this is tag a 13</a> <br /> <a href="">this is tag a 14</a> <br /> <a href="">this is tag a 15</a> <br /> <a href="">this is tag a 16</a> <br /> <a href="">this is tag a 17</a> <br /> <a href="">this is tag a 18</a> <br /> <a href="">this is tag a 19</a> <br /> <a href="">this is tag a 20</a> <br /> <script> window.onload = function() { console.log(document.links.item(3).innerHTML); console.log(document.links[4].innerHTML); console.log(document.links.item(33333)); console.log(document.links.item(-33)); console.log(document.links[33333]); console.log(document.links[-33]); }; </script> </body> </html> ``` ## HTMLCollection.prototype.namedItem() `namedItem` 方法的參數是一個字符串，表示 id 屬性或 name 屬性的值，返回對應的元素節點。如果沒有對應的節點，則返回 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> <img id="pic" src="http://example.com/hello.jpg" name="hello" /> <script> window.onload = function() { console.log(document.images.namedItem("pic")); console.log(document.images.namedItem("hello")); }; </script> </body> </html> ``` 節點對象除了繼承 `Node` 接口以外，還會繼承其他接口。 `ParentNode`接口表示當前節點是一個父節點，提供一些處理子節點的方法。 `ChildNode`接口表示當前節點是一個子節點，提供一些相關方法。 # ParentNode 接口如果當前節點是父節點，就會繼承 ParentNode 接口。由于只有元素節點（`element`）、文檔節點（`document`）和文檔片段節點（`documentFragment`）可以成為父節點，因此只有這三類節點會繼承`ParentNode`接口。 ## ParentNode.children `children`屬性返回一個`HTMLCollection`實例，成員是當前節點的所有元素子節點。該屬性只讀。下面是遍歷某個節點的所有元素子節點的示例。 ```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() { for (var i = 0; i < document.childNodes.length; i++) { console.log(document.childNodes[i]); } }; </script> </body> </html> ``` 注意，`children`屬性只包括元素子節點，不包括其他類型的子節點（比如文本子節點）。如果沒有元素類型的子節點，返回值 `HTMLCollection` 實例的 `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> <script> window.onload = function() { console.log(document.body.children.length); }; </script> </head> <body> <div></div> hello world </body> </html> ``` 另外，`HTMLCollection` 是動態集合，會實時反映 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> <script> window.onload = function() { console.log(document.body.children.length); document.body.appendChild(document.createElement("div")); console.log(document.body.children.length); }; </script> </head> <body> <div></div> hello world </body> </html> ``` ## ParentNode.firstElementChild `firstElementChild` 屬性返回當前節點的第一個元素子節點。如果沒有任何元素子節點，則返回 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> <script> window.onload = function() { console.log(document.body.firstChild.nodeName); console.log(document.body.firstElementChild.nodeName); }; </script> </head> <body> <div></div> hello world </body> </html> ``` 上面代碼中，document 節點的第一個元素子節點是<HTML>。 ## ParentNode.lastElementChild `lastElementChild` 屬性返回當前節點的最后一個元素子節點，如果不存在任何元素子節點，則返回 null。 `document.lastElementChild.nodeName` 上面代碼中，document 節點的最后一個元素子節點是<HTML>（因為 document 只包含這一個元素子節點）。 ## ParentNode.childElementCount `childElementCount` 屬性返回一個整數，表示當前節點的所有元素子節點的數目。如果不包含任何元素子節點，則返回 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> <script> window.onload = function() { console.log(document.body.childElementCount); }; </script> </head> <body> <div></div> <div></div> <div></div> <div></div> hello world </body> </html> ``` ## ParentNode.append()，ParentNode.prepend() `append` 方法為當前節點追加一個或多個子節點，位置是最后一個元素子節點的后面。該方法不僅可以添加元素子節點，還可以添加文本子節點。 ```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 parent = document.body; // 添加元素子節點 var p = document.createElement("p"); parent.append(p); // 添加文本子節點 parent.append("Hello"); // 添加多個元素子節點 var p1 = document.createElement("p"); var p2 = document.createElement("p"); parent.append(p1, p2); // 添加元素子節點和文本子節點 var p = document.createElement("p"); parent.append("Hello", p); }; </script> </body> </html> ``` 注意，該方法沒有返回值。 `prepend` 方法為當前節點追加一個或多個子節點，位置是第一個元素子節點的前面。它的用法與 `append` 方法完全一致，也是沒有返回值。 # ChildNode 接口如果一個節點有父節點，那么該節點就繼承了 `ChildNode` 接口。 ## ChildNode.remove() `remove` 方法用于從父節點移除當前節點。 ```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>this is div 0</div> <div>this is div 1</div> <div>this is div 2</div> <div>this is div 3</div> <div>this is div 4</div> <div>this is div 5</div> <div>this is div 6</div> <div>this is div 7</div> <div>this is div 8</div> <div>this is div 9</div> </body> <script> window.onload = function() { document.body.remove(); }; </script> </html> ``` ## ChildNode.before()，ChildNode.after() `before` 方法用于在當前節點的前面，插入一個或多個同級節點。兩者擁有相同的父節點。如果是多個參數, 插入的是一個`整體` 注意，該方法不僅可以插入元素節點，還可以插入文本節點。 ```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>div1</div> <script> window.onload = function() { var p = document.createElement("p"); var p1 = document.createElement("p"); var oDiv = document.getElementsByTagName("div")[0]; oDiv.before(p); oDiv.before("Hello"); oDiv.before(p, p1); oDiv.before(p, "Hello"); }; </script> </body> </html> ``` `after` 方法用于在當前節點的后面，插入一個或多個同級節點，兩者擁有相同的父節點。用法與 `before` 方法完全相同。 ## ChildNode.replaceWith() `replaceWith` 方法使用參數節點，替換當前節點。參數可以是元素節點，也可以是文本節點。 ```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>div1</div> <script> window.onload = function() { var span = document.createElement("span"); document.getElementsByTagName("div")[0].replaceWith(span); }; </script> </body> </html> ```