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