JavaScript/文件物件模型 (DOM) 簡介

Shell

執行時文件操作

Shell

執行時文件操作

HTML 頁面在內部由一棵樹實現，該樹包含 HTML 元素（和 CSS 樣式）作為其節點。這棵樹被稱為 *文件物件模型*，或 DOM。JavaScript 可以完全訪問 DOM。它可以遍歷樹，修改樹和節點，從簡單地新增新節點到重新排列頁面上的幾個區域。

關於術語的提示：由於它與 XML 密切相關，HTML 使用術語 *元素*；由於它的樹狀結構，DOM 使用術語 *節點*。

節點

當載入到瀏覽器中時，HTML 文件會被分解成一個 *節點樹*。例如，看看下面的 HTML 程式碼片段

<div id="exampleDiv">This is an<br>example HTML snippet.</div>

透過 DOM，JavaScript 將此程式碼片段視為四個節點。

div，從它的開始標籤到它的結束標籤，是一個節點。此 div 碰巧在其開始標籤內分配了一個 *屬性*。此屬性名為 "id"，其 *值* 為 "exampleDiv"。

此示例中的其他三個節點位於 div 內部。它們被稱為 div 的 *子節點*，因為 div 包含它們。相反，div 是它們的 *父節點*。

div 的第一個子節點是一個 *文字節點*，其值為 "This is an"。文字節點只包含文字；它們永遠不會包含標籤，這就是為什麼樹在這裡停止的原因。
br 標籤是另一個節點。
其餘文字是另一個文字節點。

由於文字節點和 br 標籤共享同一個父節點，因此它們被稱為 *兄弟節點*。

訪問節點

您可以透過多種方法訪問 DOM 樹的節點。其中之一是 getElementById。

<!DOCTYPE html>
<html>
  <head>
    <script>
      function go() {
        "use strict";
        const p = document.getElementById("p2");
        alert(p.innerHTML);
      }
    </script>
  </head>

  <body id="body">
    <p id="p1" style="background: aqua">one</p>
    <p id="p2" style="background: green">two</p>
    <p id="p3" style="background: red">three</p>
    <button onclick="go()">Show the second paragraph</button>
  </body>
</html>

當單擊按鈕時，函式 go 被呼叫。它訪問 id 為 'p2' 的元素並顯示其內容。

訪問內容

如果您想訪問節點的內容，可以使用不同類的不同屬性：Node.textContent，HTMLElement.innerText，或 Element.innerHTML。但它們並不相等；請考慮差異。為了使我們的示例清晰易懂，只要可能，我們都會使用 Element.innerHTML，因為它非常接近 HTML 原始碼。

const exampleContent = document.getElementById("example").innerHTML;

更改內容

在訪問節點後，您可以透過為其內容分配新值來更改其內容。

<!DOCTYPE html>
<html>
  <head>
    <script>
      function go() {
        "use strict";
        const p = document.getElementById("p2");
        p.innerHTML = "Another text";
      }
    </script>
  </head>

  <body id="body">
    <p id="p1" style="background: aqua">one</p>
    <p id="p2" style="background: green">two</p>
    <p id="p3" style="background: red">three</p>
    <button onclick="go()">Change the second paragraph</button>
  </body>
</html>

當單擊按鈕時，函式 go 被呼叫。它再次訪問 id 為 'p2' 的元素並更改其內容。

修改樹結構

JavaScript 可以操作 DOM 樹的結構。

<!DOCTYPE html>
<html>
  <head>
    <script>
      function go() {
        "use strict";

        // read 'body' node
        const b = document.getElementById("body");
        // read second 'p' node
        const p = document.getElementById("p2");
        // moves it to the end of 'body'
        b.appendChild(p);
      }
    </script>
  </head>

  <body id="body">
    <p id="p1" style="background: aqua">one</p>
    <p id="p2" style="background: green">two</p>
    <p id="p3" style="background: red">three</p>
    <button onclick="go()">Move the second paragraph</button>
  </body>
</html>

當單擊按鈕時，函式 go 被呼叫。它訪問元素 'body' 和 'p2'，然後，它將 'p' 元素移到 'body' 的末尾。

另請參閱

MDN DOM