异常教程

JavaScript HTML DOM 元素 (节点)（一文讲透）

更新时间:

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

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

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

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

在现代 Web 开发中，JavaScript 与 HTML 的结合是构建动态交互页面的核心能力。而理解 JavaScript HTML DOM 元素 (节点) 的操作逻辑，是开发者实现页面内容动态更新、用户行为响应以及复杂功能开发的基础。本文将从零开始，通过形象的比喻、清晰的步骤和实战案例，带领读者逐步掌握 DOM 节点的操作技巧，无论是修改页面样式、添加动态内容，还是构建复杂的交互功能，都能找到对应的解决方案。

什么是 DOM？为什么需要学习它？

DOM（Document Object Model，文档对象模型）可以被比喻为一座“桥梁”。它将 HTML 文档中的每个元素（如 <div>、<p>、<button> 等）转化为 JavaScript 可操作的对象，让开发者可以通过代码直接访问、修改或创建这些元素。

想象 HTML 文档是一棵“树”：

  • 根节点是 <html> 元素，
  • 分支是 <head>、<body> 等子元素，
  • 叶子则是具体的文本或注释内容。
    通过 DOM，JavaScript 能像“修剪树枝”一样，对这棵树进行增删改查操作。

掌握 DOM 节点操作的意义在于：

  1. 动态更新页面：无需重新加载页面即可修改内容或样式；
  2. 响应用户交互：比如点击按钮时弹出提示框；
  3. 构建复杂功能：如轮播图、表单验证、动态加载数据等。

基础概念：DOM 节点的类型与层级关系

1. 节点的类型

DOM 中的每个元素、文本、注释等都是“节点”。常见的节点类型包括：
| 类型 | 说明 | 示例代码 |
|--------------|----------------------------------------------------------------------|-----------------------------------|
| 元素节点 | 对应 HTML 标签（如 <div>、<a>），是 DOM 树的核心组成部分。 | <div id="content">Hello World</div> |
| 文本节点 | 存储元素内的文本内容（如 <div>中的文字</div>）。 | <p>这是文本节点的内容</p> |
| 注释节点 | HTML 中的注释（如 <!-- 这是注释 -->），默认不显示在页面上。 | <!-- 这是注释节点 --> |
| 文档节点 | 整个 HTML 文档本身。 | 整个 <html> 标签即为文档节点。 |

比喻：

  • 元素节点像“房间”，可以包含其他节点（如文本、子元素）；
  • 文本节点像“家具”，存储具体的内容；
  • 注释节点像“便签纸”，用于标注代码但不影响页面。

2. 节点的层级关系

每个节点都有明确的“父子关系”：

  • 父节点（Parent Node）：直接包含当前节点的节点。例如，<div> 是其内部 <p> 标签的父节点。
  • 子节点（Child Nodes）：父节点直接包含的所有节点，包括元素和文本节点。
  • 兄弟节点（Sibling Nodes）：拥有相同父节点的节点。

示例代码：

<div id="parent">  
  <p>这是第一个子节点</p>  
  <span>这是第二个子节点</span>  
</div>
  • #parent 是父节点，两个 <p> 和 <span> 是子节点，彼此是兄弟节点。

如何获取 DOM 元素（节点）？

获取节点是操作它的第一步。以下是常用方法：

1. 直接通过 id 获取

// HTML 中的元素  
<div id="myElement">Hello</div>  

// JavaScript 获取  
const element = document.getElementById('myElement');  
console.log(element.innerHTML); // 输出 "Hello"

比喻：
getElementById 像“门牌号查询”，直接通过唯一标识找到目标节点。

2. 通过标签名或类名获取

// 获取所有 <div> 元素  
const divs = document.getElementsByTagName('div');  

// 获取所有 class 为 "highlight" 的元素  
const highlights = document.getElementsByClassName('highlight');

注意：getElementsByTagName 和 getElementsByClassName 返回的是“动态节点列表”，会随页面变化更新。

3. 使用 CSS 选择器（推荐）

querySelector 和 querySelectorAll 是更灵活的方法：

// 获取第一个匹配的元素  
const firstParagraph = document.querySelector('p');  

// 获取所有匹配的元素（返回 NodeList）  
const allLinks = document.querySelectorAll('a');

示例：

// 选择 class 为 "menu" 的第一个 <ul> 元素  
const menu = document.querySelector('.menu ul');

修改节点的属性与内容

1. 修改元素内容

通过 innerHTML、textContent 或直接操作属性：

// 修改元素的 HTML 内容（支持插入 HTML 标签）  
element.innerHTML = '<strong>新内容</strong>';  

// 修改纯文本内容（不解析 HTML）  
element.textContent = '新文本';

2. 操作元素属性

// 获取属性值  
const href = element.getAttribute('href');  

// 设置属性值  
element.setAttribute('class', 'active');  

// 直接操作 style 属性（修改内联样式）  
element.style.color = 'red';

3. 动态添加事件监听器

// 为按钮添加点击事件  
document.getElementById('myButton').addEventListener('click', function() {  
  alert('按钮被点击了！');  
});

动态操作节点：增删改查

1. 创建新节点

// 创建元素节点  
const newDiv = document.createElement('div');  
newDiv.textContent = '我是新节点';  

// 创建文本节点  
const textNode = document.createTextNode('文本内容');

2. 添加节点

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

// 插入到某个节点的前面或后面  
const sibling = document.getElementById('sibling');  
sibling.parentNode.insertBefore(newDiv, sibling); // 插入到 sibling 前

3. 删除节点

// 移除某个节点  
const elementToRemove = document.getElementById('oldElement');  
elementToRemove.parentNode.removeChild(elementToRemove);

4. 克隆节点

// 克隆节点并包含其子节点  
const clonedNode = element.cloneNode(true);

实战案例：构建动态交互功能

案例 1：动态添加待办事项

<input type="text" id="todoInput">  
<button id="addButton">添加</button>  
<ul id="todoList"></ul>  

document.getElementById('addButton').addEventListener('click', function() {  
  const input = document.getElementById('todoInput');  
  const todoText = input.value.trim();  

  if (todoText) {  
    const li = document.createElement('li');  
    li.textContent = todoText;  
    document.getElementById('todoList').appendChild(li);  
    input.value = ''; // 清空输入框  
  }  
});

案例 2：按钮切换主题颜色

<button id="toggleTheme">切换主题</button>  

document.getElementById('toggleTheme').addEventListener('click', function() {  
  const body = document.body;  
  if (body.style.backgroundColor === 'lightblue') {  
    body.style.backgroundColor = 'white';  
  } else {  
    body.style.backgroundColor = 'lightblue';  
  }  
});

进阶技巧：遍历节点与条件判断

1. 遍历子节点

const parent = document.getElementById('container');  
const children = parent.childNodes; // 包含所有子节点（包括文本节点和注释）  

children.forEach(child => {  
  if (child.nodeType === 1) { // 只处理元素节点（nodeType 1 表示元素）  
    console.log(child.tagName);  
  }  
});

2. 判断节点类型

// 判断是否为元素节点  
if (node.nodeType === Node.ELEMENT_NODE) {  
  // 执行操作  
}  

// 判断是否为文本节点  
if (node.nodeType === Node.TEXT_NODE) {  
  // 执行操作  
}

结论

通过本文的学习，读者应能掌握 JavaScript HTML DOM 元素 (节点) 的核心操作逻辑：从获取、修改到动态增删节点，以及结合事件实现交互功能。DOM 的强大之处在于它将静态页面转化为可编程的对象，为开发者提供了无限的创意空间。

建议读者通过以下方式巩固知识：

  1. 动手实践：尝试修改案例代码，实现个性化功能；
  2. 查阅文档：熟悉 MDN Web Docs 中 DOM 方法的详细说明；
  3. 阅读源码：分析喜欢的网站或框架（如 React/Vue）如何操作 DOM。

掌握 DOM 操作是成为一名全栈开发者的重要一步，它不仅是前端技能的基础，更是理解现代框架（如虚拟 DOM）原理的关键。

最新发布

查看更多文章