HTML DOM（文档对象模型）是一种用于表示和操作 HTML 文档的编程接口。它将 HTML 文档视为一个由节点构成的树状结构，其中每个节点代表文档中的一个元素、属性、文本内容等。通过 JavaScript，开发者可以使用 HTML DOM 提供的方法和属性来动态地操作和修改页面的内容。

HTML DOM 结构：

HTML DOM 的结构是一个树状层次，从文档节点（document）开始，分为元素节点、属性节点、文本节点等。每个元素都是一个节点，可以通过 DOM 提供的方法和属性来操作这些节点。
<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM Example</title>
</head>
<body>
  <h1 id="myHeader">Hello World!</h1>
  <p>This is a paragraph.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>
</html>

上述 HTML 文档可以表示为以下 DOM 树：

  •  document

  - html
    - head
      - title
        - #text ("HTML DOM Example")
    - body
      - h1#myHeader
        - #text ("Hello World!")
      - p
        - #text ("This is a paragraph.")
      - ul
        - li
          - #text ("Item 1")
        - li
          - #text ("Item 2")

HTML DOM 操作：

通过 JavaScript，可以使用 HTML DOM 提供的方法和属性来执行各种操作，如查找元素、修改内容、添加或删除元素等。

查找元素：
// 通过 ID 获取元素
var headerElement = document.getElementById("myHeader");

// 通过标签名获取元素集合
var paragraphs = document.getElementsByTagName("p");

// 通过类名获取元素集合
var items = document.getElementsByClassName("item");

修改内容：
// 获取元素文本内容
var textContent = headerElement.textContent;

// 设置元素文本内容
headerElement.textContent = "New Text";

添加或删除元素：
// 创建新元素
var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

// 添加新元素到 body 中
document.body.appendChild(newParagraph);

// 删除元素
var elementToRemove = document.getElementById("elementToRemove");
elementToRemove.parentNode.removeChild(elementToRemove);

这只是 HTML DOM 的一小部分功能示例。HTML DOM 提供了丰富的接口，允许开发者与页面进行交互，动态地修改内容和结构，以响应用户的操作和事件。


转载请注明出处：http://www.pingtaimeng.com/article/detail/3546/JavaScript