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