DOM之通俗易懂讲解-JavaScript中文网-JavaScript教程资源分享门户

DOM (Document Object Model) 是前端开发中的一个重要概念。本文将从大家最熟悉的 HTML 开始，一步步深入介绍 DOM 的概念、结构和使用方法。

HTML与DOM

HTML 是网页的基础语言，它由标签组成，用于描述页面的结构、内容和样式。每个 HTML 标签都代表着一个元素，如 <div>、<p>、<img> 等等。这些元素可以包含其他元素或文本节点，形成一个树形结构。

而 DOM 则是浏览器对 HTML 文档的内部表示，它将 HTML 文档解析为一个树形结构，并提供了一系列的 API 以使 JavaScript 能够操作该树形结构。

DOM的结构

DOM 结构是由节点 (Node) 组成的树形结构。节点分为三种类型：

元素节点 (Element)
文本节点 (Text)
属性节点 (Attribute)

元素节点代表一个 HTML 元素，如 <div> 或 <p>；文本节点代表元素中的文本内容；属性节点代表元素的属性。例如下面这段 HTML 代码：

<div id="container">
  <p>Hello, World!</p>
</div>

它的 DOM 树结构如下：

Document
└── html
    └── body
        └── div(id="container")
            └── p
                └── #text("Hello, World!")

其中 Document 是整个文档的根节点，html、body、div 和 p 都是元素节点，#text 则是文本节点。

DOM API

DOM 提供了许多 API 用于操作文档中的节点。这些 API 可以分为两类：查询和修改。

查询节点

DOM 提供了一些方法可用于查询节点：

document.getElementById(id): 通过 id 查找元素。
document.getElementsByTagName(tagName): 通过标签名查找元素。
element.childNodes: 获取指定元素的子节点列表。
element.parentNode: 获取指定元素的父节点。

例如：

<div id="container">
  <p>Hello, World!</p>
</div>

const container = document.getElementById('container');
const paragraphs = container.getElementsByTagName('p');
const children = container.childNodes;
const parent = paragraphs[0].parentNode;

修改节点

DOM 也提供了一系列方法用于修改节点：

element.innerHTML = html: 设置元素的内部 HTML 内容。
element.appendChild(child): 在指定元素的末尾添加一个子节点。
element.removeChild(child): 删除指定元素的一个子节点。
element.setAttribute(name, value): 设置指定元素的属性值。
element.getAttribute(name): 获取指定元素的属性值。

例如：

<div id="container"></div>

const container = document.getElementById('container');
const paragraph = document.createElement('p');
paragraph.innerHTML = 'Hello, World!';
container.appendChild(paragraph);

总结

DOM 是前端开发中非常重要的一个概念，它提供了一系列 API 用于操作 HTML 文档。本文从 HTML 的基础开始，深入介绍了 DOM 的概念、结构和使用方法，并给出了一些实例代码，希望能够对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/449