JavaScript – 文档对象模型或 DOM

什么是 DOM

文档对象模型（Document Object Model，DOM）是一种表示 HTML 和 XML 文档的标准内部表现形式。通过这个标准，Web 开发者可以轻松地通过 JavaScript 访问和操作文档的各个部分，比如 HTML 元素、属性、文本。DOM 标准规定了文档的层次结构，从而实现了文档的查询和修改。

例如，以下 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>Here is some information about me:</p>
    <ul>
        <li>Name: John Doe</li>
        <li>Age: 30</li>
        <li>Location: New York</li>
    </ul>
</body>
</html>

可以用 DOM 定位和操作网页中的元素，如下所示：

// 获取 h1 元素并修改其内容
var heading = document.getElementsByTagName("h1")[0];
heading.innerHTML = "Welcome to John's website!"

// 获取 ul 元素下面的 li 元素并遍历修改其样式
var list = document.getElementsByTagName("ul")[0];
var listItems = list.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
  listItems[i].style.color = "red";
}

DOM 树结构

DOM 将 HTML 文档解析为一个树形结构，网页中每个元素（如、、、

、

ul> 等）都被视为一个节点（node）。这些节点构成的层次结构就是 DOM 树。

DOM 树中的节点类型有以下几种：

元素节点（element）: HTML 标签对应的节点，比如

、

ul>、

等。
– 文本节点（text）: HTML 元素之间的纯文本内容，比如 “Here is some information about me:”。
– 属性节点（attribute）: HTML 元素的属性，比如百度一下中的 href 属性。

以下是上述 HTML 代码的 DOM 树结构示意图：

         ┌───────────────────────┐
        html(): DocumentElement
         └───────────────────────┘
                   │
         ┌─────────┴───────────┐
        head(): HTMLHeadElement
         └───────────────────────┘
                   │
         ┌─────────┴───────────┐
      title(): HTMLTitleElement
         └───────────────────────┘
                   │
         ┌─────────┴───────────┐
        body(): HTMLBodyElement
         └───────────────────────┘
                   │
 ┌────────────────┴─────┬────────────────┐
h1():HTMLElement     p():HTMLElement      ul():HTMLElement
             │             │                 │
         "Welcome to my   "Here is some    "Name: John Doe"
          website"         information     "Age: 30"
                               │           "Location: New York"
             ┌────────────────┼─────────────────┐
           li():HTMLElement li():HTMLElement li():HTMLElement
                  │             │                 │
              "Name: John Doe" "Age: 30"       "Location: New York"

DOM 元素的查询和操作

1. 查询元素

在 DOM 中，我们通过获取元素的引用来进行元素的操作。有多种方法可以查询 DOM 树中的元素，比如使用标签名、ID、类名等。

根据标签名查询: 通过 getElementsByTagName 方法可以获取以指定标签名命名的元素的集合。该方法会返回一个 HTMLCollection 对象，其中包含此文档中所有指定标签名的元素。

var headerTags = document.getElementsByTagName("h1");
console.log(headerTags.length); // 输出 1
console.log(headerTags[0].innerHTML); // 输出 "Welcometo my website"

根据 ID 查询：通过 getElementById 方法可以根据元素的 ID 查询元素。返回一个代表指定 ID 元素的 HTMLElement 对象。

var myElement = document.getElementById("myId");

根据类名查询：通过 getElementsByClassName 方法可以获取已指定类名的元素的集合。该方法会返回一个 HTMLCollection 对象，其中包含此文档中所有指定类名的元素。

var myElements = document.getElementsByClassName("myClass");

2. 创建元素

在 DOM 中，我们还可以动态地创建元素并将其添加到文档中。以下是几种创建元素的方法：

document.createElement(tagName)：根据标签名创建一个元素节点。

var myElement = document.createElement("div");

document.createTextNode(text)：通过文本内容创建一个文本节点。

var myText = document.createTextNode("Hello, world!");

3. 元素的修改和删除

一旦我们获取到了元素的引用，可以使用以下方法进行元素的修改和删除。

HTML 元素的属性值的修改可以直接通过元素对象的属性操作。

// 修改 element 的 class 属性
element.class="myNewClass";

插入节点

DOM 提供了一些方便用于插入和删除节点的方法：

parentNode.appendChild()：在父元素的最后一个子元素后面添加一个新的子元素节点。

var parent = document.getElementById("parent");
var child = document.createElement("div");
parent.appendChild(child);

insertBefore()：将新的元素节点插入到列表中某个指定的节点之前。

var child2 = document.createElement("div");
parent.insertBefore(child2, parent.childNodes[2]);

删除元素

可以使用以下方法从 DOM 树中删除元素：

parentNode.removeChild()：从父节点中删除指定的子节点。

var childToRemove = document.getElementById("removeMe");
var parentNode = childToRemove.parentNode;
parentNode.removeChild(childToRemove);

结论

文档对象模型（Document Object Model，DOM）是 Web 开发中重要的概念，主要是通过定义一种标准的内部表现形式，将 HTML 和 XML 文档解析成为一个树形结构。通过这个标准，Web 开发者可以轻松地通过 JavaScript 访问和操作文档的各个部分，比如 HTML 元素、属性、文本等。在开发网站和 Web 应用程序的时候，理解 DOM 和掌握 DOM 操作是非常重要的技能，因为这样可以让我们更加灵活、高效地处理和操作网页。