HTML DOM 詳解

警告
請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。
如果在文檔已完成加載后執(zhí)行 document.write，整個 HTML 頁面將被覆蓋：

.

DOM 節(jié)點(diǎn)

根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：

  • 整個文檔是一個文檔節(jié)點(diǎn)
  • 每個 HTML 元素是元素節(jié)點(diǎn)
  • HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
  • 每個 HTML 屬性是屬性節(jié)點(diǎn)
  • 注釋是注釋節(jié)點(diǎn)

HTML DOM 節(jié)點(diǎn)樹
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹：
HTML DOM Tree 實(shí)例

HTML DOM Node Tree
通過 HTML DOM，樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。

節(jié)點(diǎn)父、子和同胞
節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級關(guān)系。
父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

  • 在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根（root）
  • 每個節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根（它沒有父節(jié)點(diǎn)）
  • 一個節(jié)點(diǎn)可擁有任意數(shù)量的子
  • 同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)

下面的圖片展示了節(jié)點(diǎn)樹的一部分，以及節(jié)點(diǎn)之間的關(guān)系：


DOM 節(jié)點(diǎn)關(guān)系

請看下面的 HTML 片段：

<html>
  <head> 
      <title>DOM 教程</title>
  </head> 
  <body>
      <h1>DOM 第一課</h1> 
      <p>Hello world!</p>
  </body>
</html>

從上面的 HTML 中：

  • <html> 節(jié)點(diǎn)沒有父節(jié)點(diǎn)；它是根節(jié)點(diǎn)
  • <head> 和 <body> 的父節(jié)點(diǎn)是 <html> 節(jié)點(diǎn)
  • 文本節(jié)點(diǎn) "Hello world!" 的父節(jié)點(diǎn)是 < p> 節(jié)點(diǎn)

并且：

  • <html> 節(jié)點(diǎn)擁有兩個子節(jié)點(diǎn)：<head> 和 <body>
  • <head> 節(jié)點(diǎn)擁有一個子節(jié)點(diǎn)：<title> 節(jié)點(diǎn)
  • <title> 節(jié)點(diǎn)也擁有一個子節(jié)點(diǎn)：文本節(jié)點(diǎn) "DOM 教程"
  • < h1> 和 < p> 節(jié)點(diǎn)是同胞節(jié)點(diǎn)，同時也是 <body> 的子節(jié)點(diǎn)

并且：

  • <head> 元素是 <html> 元素的首個子節(jié)點(diǎn)
  • <body> 元素是 <html> 元素的最后一個子節(jié)點(diǎn)
  • < h1> 元素是 <body> 元素的首個子節(jié)點(diǎn)
  • < p> 元素是 <body> 元素的最后一個子節(jié)點(diǎn)

警告！
DOM 處理中的常見錯誤是希望元素節(jié)點(diǎn)包含文本。
在本例中：<title>DOM 教程</title>，元素節(jié)點(diǎn) <title>，包含值為 "DOM 教程" 的文本節(jié)點(diǎn)。
可通過節(jié)點(diǎn)的 innerHTML 屬性來訪問文本節(jié)點(diǎn)的值。

HTML DOM 方法

方法是我們可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動作。

編程接口
可通過 JavaScript （以及其他編程語言）對 HTML DOM 進(jìn)行訪問。
所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。
方法是您能夠執(zhí)行的動作（比如添加或修改元素）。
屬性是您能夠獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。

getElementById() 方法
getElementById() 方法返回帶有指定 ID 的元素：
例子

var element=document.getElementById("intro");

親自試一試

HTML DOM 對象 - 方法和屬性
一些常用的 HTML DOM 方法：

  • getElementById(id) - 獲取帶有指定 id 的節(jié)點(diǎn)（元素）
  • appendChild(node) - 插入新的子節(jié)點(diǎn)（元素）
  • removeChild(node) - 刪除子節(jié)點(diǎn)（元素）

一些常用的 HTML DOM 屬性：

  • innerHTML - 節(jié)點(diǎn)（元素）的文本值
  • parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)
  • childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn)
  • attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)

現(xiàn)實(shí)生活中的對象
某個人是一個對象。
人的方法可能是 eat(), sleep(), work(), play() 等等。
所有人都有這些方法，但會在不同時間執(zhí)行它們。
一個人的屬性包括姓名、身高、體重、年齡、性別等等。
所有人都有這些屬性，但它們的值因人而異。

一些 DOM 對象方法
這里提供一些您將在本教程中學(xué)到的常用方法：

DOM對象方法

DOM 屬性

innerHTML 屬性
獲取元素內(nèi)容的最簡單方法是使用 innerHTML 屬性。
innerHTML 屬性對于獲取或替換 HTML 元素的內(nèi)容很有用。
實(shí)例
下面的代碼獲取 id="intro" 的 < p> 元素的 innerHTML：
實(shí)例

  <html>
      <body>
          <p id="intro">Hello World!</p>
          <script>
              var txt=document.getElementById("intro").innerHTML;
              document.write(txt);
          </script>
      </body>
 </html>

親自試一試
在上面的例子中，getElementById 是一個方法，而 innerHTML 是屬性。
innerHTML 屬性可用于獲取或改變?nèi)我?HTML 元素，包括 <html> 和 <body>。

nodeName 屬性
nodeName 屬性規(guī)定節(jié)點(diǎn)的名稱。

  • nodeName 是只讀的
  • 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
  • 屬性節(jié)點(diǎn)的 nodeName 與屬性名相同
  • 文本節(jié)點(diǎn)的 nodeName 始終是 #text
  • 文檔節(jié)點(diǎn)的 nodeName 始終是 #document

注釋：nodeName 始終包含 HTML 元素的大寫字母標(biāo)簽名。

nodeValue 屬性
nodeValue 屬性規(guī)定節(jié)點(diǎn)的值。

  • 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
  • 文本節(jié)點(diǎn)的 nodeValue 是文本本身
  • 屬性節(jié)點(diǎn)的 nodeValue 是屬性值

獲取元素的值
下面的例子會取回 < p id="intro"> 標(biāo)簽的文本節(jié)點(diǎn)值：
實(shí)例

<html>
  <body>
    <p id="intro">Hello World!</p>
    <script type="text/javascript">
      x=document.getElementById("intro");
      document.write(x.firstChild.nodeValue);
    </script>
  </body>
</html>

親自試一試

nodeType 屬性
nodeType 屬性返回節(jié)點(diǎn)的類型。nodeType 是只讀的。
比較重要的節(jié)點(diǎn)類型有：

nodeType 屬性類型對照表

DOM 訪問

訪問 HTML 元素（節(jié)點(diǎn)）
訪問 HTML 元素等同于訪問節(jié)點(diǎn)
您能夠以不同的方式來訪問 HTML 元素：

  • 通過使用 getElementById() 方法
  • 通過使用 getElementsByTagName() 方法
  • 通過使用 getElementsByClassName() 方法

getElementById() 方法
getElementById() 方法返回帶有指定 ID 的元素：
語法
node.getElementById("id");
下面的例子獲取 id="intro" 的元素：
實(shí)例

document.getElementById("intro");

親自試一試

getElementsByTagName() 方法
getElementsByTagName() 返回帶有指定標(biāo)簽名的所有元素。
語法
node.getElementsByTagName("tagname");
下面的例子返回包含文檔中所有 < p> 元素的列表：
實(shí)例 1

document.getElementsByTagName("p");

親自試一試
下面的例子返回包含文檔中所有 < p> 元素的列表，并且這些 < p> 元素應(yīng)該是 id="main" 的元素的后代（子、孫等等）：
實(shí)例 2

document.getElementById("main").getElementsByTagName("p");

親自試一試

getElementsByClassName() 方法
如果您希望查找?guī)в邢嗤惷乃?HTML 元素，請使用這個方法：

document.getElementsByClassName("intro");

上面的例子返回包含 class="intro" 的所有元素的一個列表：
注釋：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中無效。

DOM 修改

修改 HTML 元素
修改 HTML DOM 意味著許多不同的方面：

  • 改變 HTML 內(nèi)容
  • 改變 CSS 樣式
  • 改變 HTML 屬性
  • 創(chuàng)建新的 HTML 元素
  • 刪除已有的 HTML 元素
  • 改變事件（處理程序）

創(chuàng)建 HTML 內(nèi)容
改變元素內(nèi)容的最簡答的方法是使用 innerHTML 屬性。
下面的例子改變一個 < p> 元素的 HTML 內(nèi)容：
實(shí)例

<html>
  <body>
    <p id="p1">Hello World!</p>
    <script>
      document.getElementById("p1").innerHTML="New text!";
    </script>
  </body>
</html>

親自試一試

改變 HTML 樣式
通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象。
下面的例子改變一個段落的 HTML 樣式：
實(shí)例

<html>
  <body>
    <p id="p2">Hello world!</p>
    <script>
      document.getElementById("p2").style.color="blue";
    </script>
  </body>
</html>

親自試一試

創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上。
實(shí)例

<div id="d1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
  var para=document.createElement("p");
  var node=document.createTextNode("This is new.");
  para.appendChild(node);
  var element=document.getElementById("d1");
  element.appendChild(para);
</script>

親自試一試

DOM 內(nèi)容

使用事件
HTML DOM 允許您在事件發(fā)生時執(zhí)行代碼。
當(dāng) HTML 元素”有事情發(fā)生“時，瀏覽器就會生成事件：

  • 在元素上點(diǎn)擊
  • 加載頁面
  • 改變輸入字段

下面兩個例子在按鈕被點(diǎn)擊時改變 <body> 元素的背景色：
實(shí)例

<html>
  <body>
    <input type="button" onclick="document.body.style.backgroundColor='lavender';"value="Change background color" />
  </body>
</html>

親自試一試
在本例中，由函數(shù)執(zhí)行相同的代碼：
實(shí)例

<html>
  <body>
    <script>
      function ChangeBackground(){
        document.body.style.backgroundColor="lavender";
      }
    </script>
    <input type="button" onclick="ChangeBackground()"value="Change background color" />
  </body>
</html>

親自試一試
下面的例子在按鈕被點(diǎn)擊時改變 < p> 元素的文本：
實(shí)例

<html>
  <body>
    <p id="p1">Hello world!</p>
    <script>
      function ChangeText(){
        document.getElementById("p1").innerHTML="New text!";
      }
      </script>
        <input type="button" onclick="ChangeText()" value="Change text">
  </body>
</html>

親自試一試

DOM 元素

創(chuàng)建新的 HTML 元素- appendChild()
如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素，然后把它追加到已有的元素上。
實(shí)例

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
   var para=document.createElement("p");
   var node=document.createTextNode("This is new.");para.appendChild(node);

   var element=document.getElementById("div1");
   element.appendChild(para);
 </script>

親自試一試
例子解釋
這段代碼創(chuàng)建了一個新的 < p> 元素：

var para=document.createElement("p");

如需向 < p> 元素添加文本，您首先必須創(chuàng)建文本節(jié)點(diǎn)。這段代碼創(chuàng)建文本節(jié)點(diǎn)：

var node=document.createTextNode("This is a new paragraph.");

然后您必須向 < p> 元素追加文本節(jié)點(diǎn)：

para.appendChild(node);

最后，您必須向已有元素追加這個新元素。
這段代碼查找到一個已有的元素：

var element=document.getElementById("div1");

這段代碼向這個已存在的元素追加新元素：

element.appendChild(para);

創(chuàng)建新的 HTML 元素- insertBefore()
上一個例子中的 appendChild() 方法，將新元素作為父元素的最后一個子元素進(jìn)行添加。
如果不希望如此，您可以使用insertBefore()方法：
實(shí)例

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
  <script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new.");
    para.appendChild(node);

    var element=document.getElementById("div1");
    var child=document.getElementById("p1");
    element.insertBefore(para,child);</script>

親自試一試

刪除已有的 HTML 元素
如需刪除 HTML 元素，您必須清楚該元素的父元素：
實(shí)例

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
  var parent=document.getElementById("div1");
  var child=document.getElementById("p1");
  parent.removeChild(child);
</script>

親自試一試
例子解釋
這個 HTML 文檔包含一個帶有兩個子節(jié)點(diǎn)（兩個 < p> 元素）的 <div> 元素：

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

查找 id="div1" 的元素：

var parent=document.getElementById("div1");

查找 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

提示：能否在不引用父元素的情況下刪除某個元素？
很抱歉。DOM 需要了解您需要刪除的元素，以及它的父元素。
這里提供一個常用的解決方法：找到您需要刪除的子元素，然后使用 parentNode 屬性來查找其父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替換 HTML 元素
如需替換 HTML DOM 中的元素，請使用 replaceChild() 方法：
實(shí)例

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
  var para=document.createElement("p");
  var node=document.createTextNode("This is new.");
  para.appendChild(node);

  var parent=document.getElementById("div1");
  var child=document.getElementById("p1");
  parent.replaceChild(para,child);
</script>

親自試一試

DOM 導(dǎo)航

HTML DOM 節(jié)點(diǎn)列表
getElementsByTagName() 方法返回節(jié)點(diǎn)列表。節(jié)點(diǎn)列表是一個節(jié)點(diǎn)數(shù)組。
下面的代碼選取文檔中的所有 < p> 節(jié)點(diǎn)：
實(shí)例

var x=document.getElementsByTagName("p");

可以通過下標(biāo)號訪問這些節(jié)點(diǎn)。如需訪問第二個 < p>，您可以這么寫：

y=x[1];

親自試一試
注釋：下標(biāo)號從 0 開始。

HTML DOM 節(jié)點(diǎn)列表長度
length 屬性定義節(jié)點(diǎn)列表中節(jié)點(diǎn)的數(shù)量。
您可以使用 length 屬性來循環(huán)節(jié)點(diǎn)列表：
實(shí)例

x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++){
  document.write(x[i].innerHTML);
  document.write("<br />");
}

親自試一試
例子解釋：

  • 獲取所有 < p> 元素節(jié)點(diǎn)
  • 輸出每個 < p> 元素的文本節(jié)點(diǎn)的值

導(dǎo)航節(jié)點(diǎn)關(guān)系
您能夠使用三個節(jié)點(diǎn)屬性：parentNode、firstChild 以及 lastChild ，在文檔結(jié)構(gòu)中進(jìn)行導(dǎo)航。
請看下面的 HTML 片段：

<html>
  <body>
    <p>Hello World!</p>
    <div> 
      <p>DOM 很有用!</p> 
      <p>本例演示節(jié)點(diǎn)關(guān)系。</p>
    </div>
  </body>
</html>
  • 首個 < p> 元素是 <body> 元素的首個子元素（firstChild）
  • <div> 元素是 <body> 元素的最后一個子元素（lastChild）
  • <body> 元素是首個 < p> 元素和 <div> 元素的父節(jié)點(diǎn)（parentNode）

firstChild 屬性可用于訪問元素的文本：
實(shí)例

<html>
  <body>
    <p id="intro">Hello World!</p>
    <script>
      x=document.getElementById("intro");
      document.write(x.firstChild.nodeValue);
    </script>
  </body>
</html>

親自試一試

DOM 根節(jié)點(diǎn)
這里有兩個特殊的屬性，可以訪問全部文檔：

  • document.documentElement - 全部文檔
  • document.body - 文檔的主體

實(shí)例

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

親自試一試

childNodes 和 nodeValue
除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內(nèi)容。
下面的代碼獲取 id="intro" 的 <p> 元素的值：
實(shí)例

<html>
  <body>
    <p id="intro">Hello World!</p>
    <script>
      var txt=document.getElementById("intro").childNodes[0].nodeValue;
      document.write(txt);
    </script>
  </body>
</html>

親自試一試
在上面的例子中，getElementById 是一個方法，而 childNodes 和 nodeValue 是屬性。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 之前通過深入學(xué)習(xí)DOM的相關(guān)知識，看了慕課網(wǎng)DOM探索之基礎(chǔ)詳解篇這個視頻（在最近看第三遍的時候，準(zhǔn)備記錄一點(diǎn)東西...
    微醺歲月閱讀 4,754評論 2贊 61
  • 通過jQuery，您可以選?。ú樵?，query）HTML元素，并對它們執(zhí)行“操作”（actions）。 jQuer...
    枇杷樹8824閱讀 713評論 0贊 3
  • 警告請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。如果在文檔已完成加載后執(zhí)行 document....
    鹿守心畔光閱讀 657評論 0贊 10
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,093評論 1贊 92
  • 睡醒找何必帶我過了突變，看完了ig的比賽后安利大哥來打合作模式，把沃拉尊升到5級了。菜如我們也是困難隨便擼了！晚飯...
    AJI米閱讀 134評論 0贊 0

友情鏈接更多精彩內(nèi)容