JavaScript DOM入门：节点类型详解与元素获取方法

认真发呆

发布时间：2026-10-16 | 3人浏览过

原创

DOM是Web前端开发的核心概念之一。理解文档如何被解析为节点树，以及如何使用原生JavaScript API精准定位和操作页面元素，是构建动态网页的基础。本文将梳理DOM的基本构成，并详细演示通过ID、标签名和类名获取元素的正确写法。

DOM的基本概念

DOM全称为文档对象模型（Document Object Model）。当浏览器加载一个HTML或XHTML文档时，它会将文档内容转换为一棵由节点组成的树形结构。理解这三个字有助于把握其本质：

D (Document)：文档。指代整个网页文档。浏览器在解析过程中，将编写好的静态文档转换为可交互的文档对象。
O (Object)：对象。DOM中的每个部分都是一个独立的对象。与之关联的数据被称为“属性”，只能通过特定对象调用的功能被称为“方法”。
M (Model)：模型。指代数据的表现形式。DOM将复杂的文档结构抽象为一颗“家谱树”（节点树），便于程序遍历和操作。

DOM节点的类型

DOM文档是由各种类型的节点构成的，形象地说，节点就是树上的树枝和树叶。在前端开发中，最常用的三种节点类型如下：

第1步：理解元素节点 (Element Node)

目的：识别页面中的HTML标签结构。
说明：元素节点代表了HTML标签本身。例如，段落标签 <p> 是一个名为 "p" 的元素；无序列表 <ul> 是一个名为 "ul" 的元素（原文误写为u1，已修正）；列表项 <li> 则是 "li" 元素。
层级关系：元素可以嵌套其他元素。通常，<html> 是根元素，包含 <body>，而 <body> 内部又包含标题、段落或列表等子元素。

第2步：理解文本节点 (Text Node)

目的：处理标签内的可见内容。
说明：如果只有空标签没有内容，页面将是空的。绝大多数网页内容由文本构成。例如，<p>Hello</p> 中，"Hello" 就是一个文本节点。在标准DOM结构中，文本节点总是包裹在元素节点内部，但并非所有元素都必然包含文本节点（如 <br> 或 <img> 等自闭合标签）。

第3步：理解属性节点 (Attribute Node)

目的：增强元素的具体描述。
说明：属性用于提供额外信息，如 <a title="链接提示"></a> 中的 title。属性节点依附于元素节点，不能独立存在。

获取元素节点的三种核心方法

在实际开发中，经常需要通过JavaScript获取页面上的元素以进行修改或绑定事件。DOM提供了三种基于不同标识符来获取元素的原生方法。

第4步：通过唯一ID获取元素

入口：document.getElementById()
参数：一个字符串，即目标元素的 id 属性值（需加引号）。
动作该方法返回一个对应的DOM对象引用。
注意：id 在一个页面中必须是唯一的，因此该方法每次只返回一个元素。若不存在该ID，则返回 null。

// 假设HTML中有 <div id="purchases"></div>
var element = document.getElementById("purchases");

第5步：通过标签名称批量获取元素

入口：element.getElementsByTagName()
参数：标签名称字符串，如 "li", "div", "p" 等。
动作：返回一个实时更新的 HTMLCollection 集合（类似数组），包含所有匹配的标签元素。
完成状态判断：通过检查返回集合的 length 属性确认匹配数量。

// 获取页面中所有的列表项
var items = document.getElementsByTagName("li");

第6步：通过CSS类名批量获取元素

入口：element.getElementsByClassName()
参数：类名字符串。支持空格分隔多个类名以查找同时拥有这些类的元素。
动作：返回一个带有指定类名的元素集合（NodeList/HTMLCollection）。

// 获取所有拥有 'sale' 类的元素
var saleItems = document.getElementsByClassName("sale");

// 获取同时拥有 'item' 和 'active' 两个类的元素
var activeItems = document.getElementsByClassName("item active");