JavaScript编程: .DOM（文档对象模型）

DOM（文档对象模型）

HTML页面内部是通过一个树状结构来实现的，这棵树包含HTML元素（和CSS样式），每个元素和样式都是树的节点。这个树被称为文档对象模型（DOM）。JavaScript可以完全访问DOM，它可以遍历树、修改树和节点，从简单的添加新节点到重新排列页面上的多个区域。

术语提示：

由于HTML与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 的元素并修改其内容为 "Another text"。

修改树结构

JavaScript可以操作DOM树的结构。

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

        // 读取 'body' 节点
        const b = document.getElementById("body");
        // 读取第二个 'p' 节点
        const p = document.getElementById("p2");
        // 将其移动到 '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

最后修改: 2025年01月13日星期一 15:09