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 代码：
---- --------------- --------- ---------- ------
它的 DOM 树结构如下：
--------
--- ----
--- ----
--- -------------------
--- -
--- ------------- --------其中 Document 是整个文档的根节点，html、body、div 和 p 都是元素节点，#text 则是文本节点。
DOM API
DOM 提供了许多 API 用于操作文档中的节点。这些 API 可以分为两类：查询和修改。
查询节点
DOM 提供了一些方法可用于查询节点：
document.getElementById(id): 通过 id 查找元素。document.getElementsByTagName(tagName): 通过标签名查找元素。element.childNodes: 获取指定元素的子节点列表。element.parentNode: 获取指定元素的父节点。
例如：
---- --------------- --------- ---------- ------
----- --------- - ------------------------------------- ----- ---------- - ------------------------------------ ----- -------- - --------------------- ----- ------ - -------------------------
修改节点
DOM 也提供了一系列方法用于修改节点：
element.innerHTML = html: 设置元素的内部 HTML 内容。element.appendChild(child): 在指定元素的末尾添加一个子节点。element.removeChild(child): 删除指定元素的一个子节点。element.setAttribute(name, value): 设置指定元素的属性值。element.getAttribute(name): 获取指定元素的属性值。
例如：
---- ---------------------
----- --------- - ------------------------------------- ----- --------- - ---------------------------- ------------------- - ------- -------- ---------------------------------
总结
DOM 是前端开发中非常重要的一个概念，它提供了一系列 API 用于操作 HTML 文档。本文从 HTML 的基础开始，深入介绍了 DOM 的概念、结构和使用方法，并给出了一些实例代码，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/449