异常教程

HTML DOM 节点（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，HTML DOM（文档对象模型）是连接静态网页与动态交互的核心桥梁。而“HTML DOM 节点”作为DOM的最小组成单元，是开发者操作网页元素、实现功能逻辑的基础。无论是修改页面内容、响应用户交互，还是动态生成内容，都需要深入理解节点的概念与操作方式。本文将从基础概念出发，结合实例代码，逐步解析节点的核心知识点，帮助读者掌握如何通过节点操作实现网页的灵活控制。

节点的基本概念：网页结构的“积木块”

什么是节点？

HTML DOM 节点可以类比为构建网页的“积木块”。每个HTML标签（如<div>、<p>）、文本内容、注释甚至属性，都可以视为一个独立的节点。这些节点按照层级关系组织成一棵树状结构，称为“DOM树”。

比喻说明：
想象一个家庭树，每个家庭成员代表一个节点，父辈与子辈的关系对应DOM中的父子节点。例如，<body>是父节点，它包含的<h1>和<div>是子节点。这种层级结构让开发者能够精准定位和操作网页中的任意元素。

DOM树的结构示例

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <div id="content">
        <p>这是段落内容。</p>
    </div>
</body>
</html>

在上述代码中：

  • <html>是根节点；
  • <head>和<body>是它的子节点；
  • <h1>和<div>是<body>的子节点；
  • 文本内容如“欢迎来到我的网站”是文本节点。

节点的类型：认识不同“积木块”的功能

HTML DOM 节点包含多种类型，每种类型对应不同的用途。以下是常见的节点类型及其特点：

节点类型描述示例代码
元素节点对应HTML标签（如<div>、<a>），是DOM树的主要组成部分。<div>这是一个元素节点</div>
文本节点存储标签内的文本内容，不包含标签本身。<p>这里的文本是文本节点</p>
属性节点存储元素的属性（如id="content"、class="active"）。<img src="image.jpg">
注释节点对应HTML中的注释<!-- 这是注释 -->，默认不显示在页面上。<!-- 重要说明 -->
文档节点整个HTML文档的根节点，即<html>的父节点。整个HTML文件

关键属性：定位节点的“身份证”

每个节点都有三个核心属性，用于标识其类型和内容：

  1. nodeType

    • 返回节点类型的数值代码（如1表示元素节点，3表示文本节点）。
    const elementNode = document.querySelector("h1");
console.log(elementNode.nodeType); // 输出 1

  2. nodeName

    • 返回节点名称（如元素节点名称为标签名大写，文本节点为#text）。
    console.log(elementNode.nodeName); // 输出 "H1"

  3. nodeValue

    • 对于文本节点，返回其文本内容；对于元素节点，通常返回null。
    const textNode = elementNode.firstChild;
console.log(textNode.nodeValue); // 输出 "欢迎来到我的网站"

节点的增删改查：操作DOM的四大核心方法

1. 创建节点：用JavaScript“捏出新积木”

使用document.createElement()或document.createTextNode()创建新节点：

// 创建元素节点
const newDiv = document.createElement("div");
newDiv.textContent = "这是新添加的内容";

// 创建文本节点
const newText = document.createTextNode("动态生成的文本");

2. 添加节点：将新节点“安装到树上”

通过appendChild()将节点添加为父节点的最后一个子节点，或用insertBefore()指定插入位置：

// 将新div添加到body末尾
document.body.appendChild(newDiv);

// 在existingElement前插入newText
const existingElement = document.getElementById("content");
existingElement.parentNode.insertBefore(newText, existingElement);

3. 删除节点：移除“积木块”

通过removeChild()从父节点中移除指定子节点：

// 移除existingElement
const parent = existingElement.parentNode;
parent.removeChild(existingElement);

4. 替换节点：用新节点“替换旧积木”

使用replaceChild()直接替换节点：

// 用newDiv替换existingElement
parent.replaceChild(newDiv, existingElement);

节点遍历：探索DOM树的“家族关系”

1. 访问节点关系

每个节点都有以下属性指向其在DOM树中的位置：

  • parentNode：指向当前节点的父节点；
  • childNodes：返回当前节点的所有子节点（包括文本节点和注释节点）；
  • firstChild和lastChild：分别指向第一个和最后一个子节点；
  • nextSibling和previousSibling：指向同级节点的下一个或上一个节点。
// 遍历所有子节点
let child = parent.firstChild;
while (child) {
  console.log(child.nodeName);
  child = child.nextSibling;
}

2. 快捷遍历方法：querySelector与querySelectorAll

通过CSS选择器快速定位节点：

// 选择所有p元素
const paragraphs = document.querySelectorAll("p");

// 选择ID为"header"的元素
const header = document.querySelector("#header");

实战案例：动态操作HTML DOM 节点

案例1：动态生成列表

通过用户输入动态添加列表项：

<input type="text" id="input">
<button onclick="addItem()">添加</button>
<ul id="list"></ul>

<script>
function addItem() {
  const text = document.getElementById("input").value;
  if (text.trim() === "") return;

  // 创建新节点
  const li = document.createElement("li");
  const textNode = document.createTextNode(text);
  li.appendChild(textNode);

  // 插入到列表末尾
  const list = document.getElementById("list");
  list.appendChild(li);
}
</script>

案例2：表单验证与节点交互

根据输入内容动态显示错误提示：

<form>
  <input type="text" id="username" placeholder="用户名">
  <div id="error" style="color: red;"></div>
  <button type="button" onclick="validate()">提交</button>
</script>

<script>
function validate() {
  const username = document.getElementById("username").value;
  const errorNode = document.getElementById("error");

  if (username.length < 3) {
    // 显示错误信息
    errorNode.textContent = "用户名至少3个字符";
  } else {
    // 清除错误信息
    errorNode.textContent = "";
  }
}
</script>

结论

掌握HTML DOM 节点的操作是网页开发的基石。通过理解节点类型、属性、方法以及遍历技巧，开发者能够灵活地动态修改页面内容、响应用户行为，并构建复杂的交互功能。无论是简单的内容更新，还是复杂的表单验证，节点操作都是实现这些功能的底层逻辑。建议读者通过实际编写代码加深理解，例如尝试创建动态菜单、实时数据展示等项目，逐步提升对DOM节点的掌控能力。

未来学习中，可以进一步探索事件监听、DOM性能优化等进阶主题，但无论技术如何发展，对DOM节点的深刻理解始终是前端开发的核心技能之一。

最新发布

查看更多文章