JavaScript（18）：HTML DOM

本文轉載自查看原文 2019-03-22 16:37 12882 03 JavaScript

通過 HTML DOM，JavaScript 能夠訪問和改變 HTML 文檔的所有元素。

一、HTML DOM（文檔對象模型）

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

1、什么是 DOM？

DOM 是一項 W3C (World Wide Web Consortium) 標准。

DOM 定義了訪問文檔的標准：

“W3C 文檔對象模型（DOM）是中立於平台和語言的接口，它允許程序和腳本動態地訪問、更新文檔的內容、結構和樣式。”

W3C DOM 標准被分為 3 個不同的部分：

Core DOM - 所有文檔類型的標准模型
XML DOM - XML 文檔的標准模型
HTML DOM - HTML 文檔的標准模型

2、什么是 HTML DOM？

HTML DOM 是 HTML 的標准對象模型和編程接口。它定義了：

作為對象的 HTML 元素
所有 HTML 元素的屬性
訪問所有 HTML 元素的方法
所有 HTML 元素的事件

換言之：HTML DOM 是關於如何獲取、更改、添加或刪除 HTML 元素的標准。

3、對象的 HTML DOM 樹

HTML DOM 模型被結構化為對象樹：

通過這個對象模型，JavaScript 獲得創建動態 HTML 的所有力量：

JavaScript 能改變頁面中的所有 HTML 元素
JavaScript 能改變頁面中的所有 HTML 屬性
JavaScript 能改變頁面中的所有 CSS 樣式
JavaScript 能刪除已有的 HTML 元素和屬性
JavaScript 能添加新的 HTML 元素和屬性
JavaScript 能對頁面中所有已有的 HTML 事件作出反應
JavaScript 能在頁面中創建新的 HTML 事件

通過 HTML DOM，樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。

4、節點父、子和同胞

節點樹中的節點彼此擁有層級關系。

父（parent）、子（child）和同胞（sibling）等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱為根（root）
每個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分，以及節點之間的關系：

DOM 節點關系

<html>

   <head>
       <title>DOM 教程</title>
   </head>

  <body>
       <h1>DOM 第一課</h1>
       <p>Hello world!</p>
   </body>

</html>

從以上的 HTML 中您能讀到以下信息：

是根節點
沒有父
是和的父
是的第一個子
是的最后一個子

同時：

有一個子： <li><title> 有一個子（文本節點）："DOM 教程" <li><body> 有兩個子：<h1> 和 <li><h1> 有一個子："DOM 第一課" <li> 有一個子："Hello world!" <li><h1> 和 是同胞</li></ul><h2>二、HTML DOM Document 對象</h2>每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。描述當前窗口或指定窗口對象的文檔。它包含了文檔從<head>到</body>的內容。 　　用法：<blockquote>document （當前窗口） 或 <窗口對象>.document （指定窗口）</blockquote>Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。<h3>1、Document 對象集合</h3><ul><li>all[]：提供對文檔中所有 HTML 元素的訪問。</li><li>anchors[]：返回對文檔中所有 Anchor 對象的引用。</li><li>applets：返回對文檔中所有 Applet 對象的引用。</li><li>forms[]：返回對文檔中所有 Form 對象引用。</li><li>images[]：返回對文檔中所有 Image 對象引用。</li><li>links[]：返回對文檔中所有 Area 和 Link 對象引用。</li></ul><a name="images[]; Image 圖片對象">images[]; Image 圖片對象</a>詳解：<a name="images[]; Image 圖片對象"></a>document.images[] 是一個數組，包含了文檔中所有的圖片（<img>）。要引用單個圖片，可以用 document.images[x]。如果某圖片包含“name”屬性，也就是用“<img name="...">”這種格式定義了一幅圖片，就可以使用“document.images['...']”這種方法來引用圖片。在 IE 中，如果某圖片包含 ID 屬性，也就是用“<img id="...">”這種格式定義了一幅圖片，就可以直接使用“<imageID>”來引用圖片。單個 Image 對象的屬性：name; src; lowsrc; width; height; vspace; hspace; border 這些屬性跟<img>標記里的同名屬性是一樣的。在 Netscape 里，除了 src 屬性，其它屬性（幾乎全部）都不能改的，即使改了，在文檔中也不能顯示出效果來。這些屬性最有用的就是 src 了，通過對 src 屬性賦值，可以實時的更改圖片。事件：onclick不顯示在文檔中的 Image 對象是用 var 語句定義的：<blockquote>var myImage = new Image(); 或 var myImage = new Image(<圖片地址字符串>);</blockquote>然后就可以像一般 Image 對象一樣對待 myImage 變量了。不過既然它不顯示在文檔中，以下屬性：lowsrc, width, height, vspace, hspace, border 就沒有什么用途了。一般這種對象只有一個用：預讀圖片(preload)。因為當對對象的 src 屬性賦值的時候，整個文檔的讀取、JavaScript 的運行都暫停，讓瀏覽器專心的讀取圖片。預讀圖片以后，瀏覽器的緩存里就有了圖片的 Copy，到真正要把圖片放到文檔中的時候，圖片就可以立刻顯示了。現在的網頁中經常會有一些圖像連接，當鼠標指向它的時候，圖像換成另外一幅圖像，它們都是先預讀圖像的。預讀圖像的 JavaScript 例子以下例子適合預讀少量圖片。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var imagePreload = new Image(); imagePreload.src = '001.gif'; imagePreload.src = '002.gif'; imagePreload.src = '003.gif';</pre></div>以下例子適合預讀大量圖片。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>function imagePreload() { var imgPreload = new Image(); for (i = 0; i < arguments.length; i++) { imgPreload.src = arguments[i]; } } imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');</pre></div><h3>2、Document 對象屬性</h3><ul><li>body：提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。</li><li>cookie：設置或返回與當前文檔有關的所有 cookie。</li><li>domain：返回當前文檔的域名。</li><li>lastModified：返回文檔被最后修改的日期和時間。</li><li>referrer：返回載入當前文檔的文檔的 URL。</li><li>title：返回當前文檔的標題。</li><li>URL：返回當前文檔的 URL。</li><li>fgColor :指<body>標記的 text 屬性所表示的文本顏色。 <li>bgColor :指<body>標記的 bgcolor 屬性所表示的背景顏色。 <li>linkColor :指<body>標記的 link 屬性所表示的連接顏色。 <li>alinkColor :指<body>標記的 alink 屬性所表示的活動連接顏色。 <li>vlinkColor :指<body>標記的 vlink 屬性所表示的已訪問連接顏色</li></ul><h3>3、Document 對象方法</h3><ul><li>getElementById()：返回對擁有指定 id 的第一個對象的引用。</li><li>getElementsByName()：返回帶有指定名稱的對象集合。</li><li>getElementsByTagName()：返回帶有指定標簽名的對象集合。</li><li>open()：打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。</li><li>write()：向文檔寫 HTML 表達式或 JavaScript 代碼。</li><li>writeln()：等同於 write() 方法，不同的是在每個表達式之后寫一個換行符。</li><ul> </ul><li>close()：關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。</li><li>clear() ：清空當前文檔。</li></ul>open方法實例：彈出式更新通知：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' + 'menubar=no,toolbar=no,directories=no,location=no,' + 'status=no,resizable=no,scrollbars=yes'); whatsNew.document.write('<center>更新通知< /center>'); whatsNew.document.write('最后更新日期：00.08.01'); whatsNew.document.write('00.08.01：增加了“我的最愛”欄目。'); whatsNew.document.write('' + '<a href="javascript:self.close()">關閉窗口</a>'); whatsNew.document.close();</pre></div>當然也可以先寫好一個 HTML 文件，在 open() 方法中直接 load 這個文件。<h2>三、查找 HTML 元素</h2>首個 HTML DOM Level 1 (1998)，定義了 11 個 HTML 對象、對象集合和屬性。它們在 HTML5 中仍然有效。后來，在 HTML DOM Level 3，加入了更多對象、集合和屬性。<ul><li>document.anchors：返回擁有 name 屬性的所有 <a> 元素。 </li><li>document.baseURI：返回文檔的絕對基准 URI </li><li>document.body：返回 <body> 元素 </li><li>document.cookie：返回文檔的 cookie </li><li>document.doctype：返回文檔的 doctype </li><li>document.documentElement：返回 <html> 元素 </li><li>document.documentMode：返回瀏覽器使用的模式 </li><li>document.documentURI：返回文檔的 URI </li><li>document.domain：返回文檔服務器的域名 </li><li>document.embeds：返回所有 <embed> 元素 </li><li>document.forms：返回所有 <form> 元素 </li><li>document.head：返回 <head> 元素 </li><li>document.images：返回所有 <img> 元素 </li><li>document.implementation：返回 DOM 實現 </li><li>document.inputEncoding：返回文檔的編碼（字符集） </li><li>document.lastModified：返回文檔更新的日期和時間 </li><li>document.links：返回擁有 href 屬性的所有 <area> 和 <a> 元素 </li><li>document.readyState：返回文檔的（加載）狀態 </li><li>document.referrer：返回引用的 URI（鏈接文檔） </li><li>document.scripts：返回所有 <script> 元素 </li><li>document.strictErrorChecking：返回是否強制執行錯誤檢查 </li><li>document.title：返回 <title> 元素 </li><li>document.URL：返回文檔的完整 URL </li></ul>通常，通過 JavaScript，您需要操作 HTML 元素。<h3>1、通過 HTML 對象選擇器查找 HTML 對象</h3>本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后顯示所有元素值：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + " "; } document.getElementById("demo").innerHTML = text;</pre></div>以下 HTML 對象（和對象集合）也是可訪問的：<ul><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.anchors</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.body</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.documentElement</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.embeds</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.forms</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.head</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.images</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.links</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.scripts</a><li><a href="https://www.w3school.com.cn/tiy/t.asp?f=js_doc_anchors">document.title</a></li></ul><h3>2、通過 id 查找 HTML 元素</h3>在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。本例查找 id="intro" 元素：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var x=document.getElementById("intro");</pre></div>如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。如果未找到該元素，則 x 將包含 null。<h3>3、通過標簽名查找 HTML 元素</h3>本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 元素：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var x=document.getElementById("main"); var y=x.getElementsByTagName("p");</pre></div><h3>4、通過類名找到 HTML 元素</h3>本例通過 <a href="https://www.runoob.com/jsref/met-document-getelementsbyclassname.html">getElementsByClassName</a> 函數來查找 class="intro" 的元素：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var x=document.getElementsByClassName("intro");</pre></div><h3>5、通過 CSS 選擇器查找 HTML 元素</h3>如果您需要查找匹配指定 CSS 選擇器（id、類名、類型、屬性、屬性值等等）的所有 HTML 元素，請使用 querySelectorAll() 方法。本例返回 class="intro" 的所有 元素列表：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var x = document.querySelectorAll("p.intro");</pre></div>querySelectorAll() 不適用於 Internet Explorer 8 及其更早版本。<h2>四、DOM - 導航</h2><ul></ul><h3>1、導航節點關系</h3>通過 JavaScript，您可以使用以下節點屬性在節點之間導航：<ul><li>parentNode <li>childNodes[nodenumber] <li>firstChild <li>lastChild <li>nextSibling <li>previousSibling</li></ul><div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示節點關系。</p> </div> </body> </html></pre></div>firstChild 屬性可用於訪問元素的文本：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html></pre></div><h3>2、DOM 根節點</h3>這里有兩個特殊的屬性，可以訪問全部文檔：<ul><li>document.documentElement - 全部文檔 <li>document.body - 文檔的主體</li></ul><div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示 <b>document.body</b> 屬性。</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html></pre></div><h3>3、子節點和節點值</h3>文本節點的值能夠通過節點的 innerHTML 屬性進行訪問：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myTitle = document.getElementById("demo").innerHTML;</pre></div>訪問 innerHTML 屬性等同於訪問首個子節點的 nodeValue：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myTitle = document.getElementById("demo").firstChild.nodeValue;</pre></div>也可以這樣訪問第一個子節點：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myTitle = document.getElementById("demo").childNodes[0].nodeValue;</pre></div>以下三個例子取回 <h1> 元素的文本並復制到 元素中：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML; document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue; document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;</pre></div><h3>4、nodeName 屬性</h3>nodeName 屬性規定節點的名稱。<ul><li>nodeName 是只讀的 <li>元素節點的 nodeName 等同於標簽名 <li>屬性節點的 nodeName 是屬性名稱 <li>文本節點的 nodeName 總是 #text <li>文檔節點的 nodeName 總是 #document</li></ul><div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><h1 id="id01">我的第一張網頁</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; </script></pre></div>注釋：nodeName 總是包含 HTML 元素的大寫標簽名。<h3>5、nodeValue 屬性</h3>nodeValue 屬性規定節點的值。<ul><li>元素節點的 nodeValue 是 undefined <li>文本節點的 nodeValue 是文本文本 <li>屬性節點的 nodeValue 是屬性值</li></ul><h3>6、nodeType 屬性</h3>nodeType 屬性返回節點的類型。nodeType 是只讀的。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><h1 id="id01">我的第一張網頁</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; </script></pre></div>最重要的 nodeType 屬性和類型是：<ul><li>ELEMENT_NODE：1 </li><li>ATTRIBUTE_NODE：2 </li><li>TEXT_NODE：3 </li><li>COMMENT_NODE：8 </li><li>DOCUMENT_NODE：9 </li><li>DOCUMENT_TYPE_NODE：10 </li></ul>Type 2 在 HTML DOM 中已棄用。XML DOM 中未棄用。<h2>五、改變 HTML 元素的內容</h2>改變 HTML 元素<ul><li>element.innerHTML = new html content:改變元素的 inner HTML</li><li>element.attribute = new value:改變 HTML 元素的屬性值</li><li>element.setAttribute(attribute, value):改變 HTML 元素的屬性值</li><li>element.style.property = new style:改變 HTML 元素的樣式</li></ul><h3>1、改變 HTML 輸出流</h3>JavaScript 能夠創建動態的 HTML 內容：今天的日期是： Fri Feb 21 2020 16:34:17 GMT+0800 (中國標准時間)在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html></pre></div>注意：絕對不要在文檔(DOM)加載完成之后使用 document.write()。這會覆蓋該文檔。<h3>2、改變 HTML 內容</h3>修改 HTML 內容的最簡單的方法是使用 innerHTML 屬性。如需改變 HTML 元素的內容，請使用這個語法：document.getElementById(id).innerHTML=新的 HTML本例改變了 元素的內容：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="新文本!"; </script> </body> </html></pre></div>本例改變了 <h1> 元素的內容：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="新標題"; </script> </body> </html></pre></div><h3>3、改變 HTML 屬性</h3>如需改變 HTML 元素的屬性，請使用這個語法：document.getElementById(id).attribute=新屬性值本例改變了 <img> 元素的 src 屬性：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif"> <script> document.getElementById("image").src="landscape.jpg"; </script> </body> </html></pre></div><h3>4、改變 HTML 樣式</h3>如需改變 HTML 元素的樣式，請使用這個語法：<blockquote>document.getElementById(id).style.property=新樣式</blockquote>下面的例子會改變 元素的樣式：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> <p>以上段落通過腳本修改。</p> </body> </html></pre></div>本例改變了 id="id1" 的 HTML 元素的樣式，當用戶點擊按鈕時：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><!DOCTYPE html> <html> <body> <h1 id="id1">我的標題 1</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> 點我!</button> </body> </html></pre></div><h2>六、添加和移除HTML元素(節點)</h2>添加和刪除元素<ul><li>document.createElement(element):創建 HTML 元素</li><li>document.removeChild(element):刪除 HTML 元素</li><li>document.appendChild(element):添加 HTML 元素</li><li>document.replaceChild(element):替換 HTML 元素</li><li>document.write(text):寫入 HTML 輸出流</li></ul> <h3>1、創建新的 HTML 元素 (節點) - appendChild()</h3>要創建新的 HTML 元素 (節點)需要先創建一個元素，然后在已存在的元素中添加它。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); </script></pre></div><h3>2、創建新的 HTML 元素 (節點) - insertBefore()</h3>以上的實例我們使用了 appendChild() 方法，它用於添加新元素到尾部。如果我們需要將新元素添加到開始位置，可以使用 insertBefore() 方法:<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node); var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.insertBefore(para, child); </script></pre></div><h3>3、移除已存在的元素</h3>要移除一個元素，你需要知道該元素的父元素。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script></pre></div>注意：早期的 Internet Explorer 瀏覽器不支持 node.remove() 方法。<h5>注意：如果能夠在不引用父元素的情況下刪除某個元素，就太好了。不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。</h5>以下代碼是已知要查找的子元素，然后查找其父元素，再刪除這個子元素（刪除節點必須知道父節點）：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var child = document.getElementById("p1"); child.parentNode.removeChild(child);</pre></div><h3>4、替換 HTML 元素 - replaceChild()</h3>我們可以使用 replaceChild() 方法來替換 HTML DOM 中的元素。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script></pre></div><h2>七、HTML DOM 集合</h2><h3>1、HTMLCollection 對象</h3>getElementsByTagName() 方法返回 HTMLCollection 對象。HTMLCollection 對象是類數組的 HTML 元素列表（集合）。下面的代碼選取文檔中的所有 元素：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var x = document.getElementsByTagName("p");</pre></div><pre></pre>該集合中的元素可通過索引號進行訪問。如需訪問第二個 元素，您可以這樣寫：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>y = x[1];</pre></div>注釋：索引從 0 開始。<h3>2、HTML HTMLCollection 長度</h3>length 屬性定義了 HTMLCollection 中元素的數量：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myCollection = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = myCollection.length;</pre></div>length 屬性在您需要遍歷集合中元素時是有用的：改變所有 元素的背景色：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) { myCollection[i].style.backgroundColor = "red"; }</pre></div>注意：HTMLCollection 也許看起來像數組，但並非數組。您能夠遍歷列表並通過數字引用元素（就像數組那樣）。不過，您無法對 HTMLCollection 使用數組方法，比如 valueOf()、pop()、push() 或 join()。<h2>八、HTML DOM 節點列表NodeList </h2>NodeList 對象是一個從文檔中獲取的節點列表 (集合) 。NodeList 對象類似 <a href="https://www.runoob.com/js/js-htmldom-elements.html">HTMLCollection</a> 對象。一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 對象，而不是 HTMLCollection 對象。所有瀏覽器的 childNodes 屬性返回的是 NodeList 對象。大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象。以下代碼選取了文檔中所有的 節點：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myNodeList = document.querySelectorAll("p");</pre></div>NodeList 中的元素可以通過索引(以 0 為起始位置)來訪問。訪問第二個 元素可以是以下代碼:<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>y = myNodeList[1];</pre></div><h3>1、NodeList 對象 length 屬性</h3>NodeList 對象 length 屬性定義了節點列表中元素的數量。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;</pre></div>修改節點列表中所有 元素的背景顏色:<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre>var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i < myNodelist.length; i++) { myNodelist[i].style.backgroundColor = "red"; }</pre></div><h3>2、HTMLCollection 與 NodeList 的區別</h3><a href="https://www.runoob.com/js/js-htmldom-collections.html">HTMLCollection</a> 是 HTML 元素的集合，NodeList 是一個文檔節點的集合。NodeList 與 HTMLCollection 都與數組對象有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。NodeList 與 HTMLCollection 都有 length 屬性。都不是一個數組！HTMLCollection 元素可以通過 name，id 或索引來獲取。NodeList 只能通過索引來獲取。只有 NodeList 對象有包含屬性節點和文本節點。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript和HTML DOM的區別與聯系 JavaScript（19）：HTML DOM 事件原生JavaScript HTML DOM Style 對象參考 JavaScript HTML DOM 元素操作（節點） html dom與javascript的關系 -我們用JavaScript對網頁（HTML）進行的所有操作都是通過DOM進行的【HTML+CSS+JavaScript】實現待辦事項（純DOM實現） DOM，瀏覽器，javascript，html之間的關系 Javascript | DOM\DOM樹淺析核心dom和html dom的區別十七. HTML5 DOM擴展(獲取元素方式, 類名操作, 自定義屬性)