计算机考试手册
登录注册
首页...DOM元素操作详解与实战
Web程序设计第四章 DOM操作与事件处理/第二节 DOM元素操作

DOM元素操作详解与实战

2026-03-24
WP

第四章 DOM操作与事件处理

第二节 DOM元素操作

概述

本节内容主要介绍DOM（文档对象模型）中元素的操作方法，帮助学习者深入理解如何通过JavaScript动态操作网页中的HTML元素。学习目标包括掌握元素的查找、创建、修改、删除等基本操作，以及如何操作元素的属性和样式，理解DOM操作的工作机制和浏览器的响应过程。通过本节内容，考生可以熟练运用DOM元素操作实现网页动态效果，为Web程序设计打下坚实基础。

核心概念

  • DOM（Document Object Model）：是HTML和XML文档的对象表示，是程序与网页内容交互的接口。
  • 元素节点(Element Node)：DOM树中的节点类型之一，代表HTML标签元素。
  • 节点操作：对DOM节点进行的增删改查操作。
  • 属性操作：获取和修改HTML元素的属性值。
  • 样式操作：通过JavaScript动态修改元素的CSS样式。
  • 节点遍历：访问DOM树中的节点，如父节点、子节点、兄弟节点。

原理分析

DOM元素操作基于浏览器内置的DOM API，JavaScript通过调用这些API，操作内存中的DOM树结构，进而影响页面的显示。浏览器将HTML解析成DOM树，JavaScript操作DOM节点时，浏览器会实时更新页面显示。DOM操作涉及节点的增删改查，属性和样式的动态调整，事件绑定等。理解DOM节点之间的层级关系（父子、兄弟）和节点类型，有助于高效操作DOM。

  1. 节点查找原理：通过方法如getElementById、getElementsByTagName、querySelector等，快速定位目标元素。
  2. 节点创建与插入：使用createElement、createTextNode等创建节点，利用appendChild、insertBefore等插入节点。
  3. 节点删除：通过removeChild或元素自身的remove方法删除节点。
  4. 属性与样式操作：通过setAttribute、getAttribute修改属性，通过style属性调整内联样式。

详细内容

1. DOM元素的查找方法

查找元素是DOM操作的第一步，常用方法包括：

  • getElementById(id)：通过唯一的id属性查找元素，返回单个元素。
  • getElementsByTagName(tagName)：通过标签名查找所有匹配元素，返回HTMLCollection（动态集合）。
  • getElementsByClassName(className)：通过类名查找元素，返回HTMLCollection。
  • querySelector(selector)：通过CSS选择器查找第一个匹配元素。
  • querySelectorAll(selector)：通过CSS选择器查找所有匹配元素，返回NodeList（静态集合）。

示例：

const header = document.getElementById('header');
const items = document.getElementsByClassName('item');
const firstButton = document.querySelector('button.primary');

注意：getElementsByTagName和getElementsByClassName返回的是实时集合，内容会随着DOM变化自动更新，querySelectorAll返回的是静态集合。

2. 创建与插入DOM元素

动态创建元素是实现页面动态效果的基础。主要步骤：

  • 使用**document.createElement(tagName)**创建元素节点。
  • 使用**document.createTextNode(text)**创建文本节点。
  • 插入节点到DOM树中，常用方法：
    • appendChild：添加到父节点的最后一个子节点。
    • insertBefore：插入到指定节点之前。
    • replaceChild：替换子节点。

示例：

const newDiv = document.createElement('div');
const textNode = document.createTextNode('这是新添加的内容');
newDiv.appendChild(textNode);
document.body.appendChild(newDiv);

注意：插入节点前，若插入的节点已存在于页面中，会先从原位置移除。

3. 修改DOM元素属性与内容

元素的属性和内容是网页展现的重要部分。可通过以下方式操作：

  • 属性操作

    • getAttribute(attrName)：获取属性值。
    • setAttribute(attrName, value)：设置属性值。
    • 也可通过元素对象的属性直接操作，如element.id = 'newId'。

  • 内容操作

    • innerHTML：获取或设置元素的HTML内容，支持标签解析。
    • textContent：获取或设置元素的纯文本内容，无标签解析。

示例：

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
link.textContent = '访问示例网站';

注意：修改innerHTML会重新解析HTML并刷新子节点，可能导致事件绑定失效。

4. 删除DOM元素

删除元素常用方法：

  • parentNode.removeChild(childNode)：通过父节点删除子节点。
  • element.remove()：元素自身调用remove方法删除自己（现代浏览器支持）。

示例：

const item = document.querySelector('.item');
item.parentNode.removeChild(item);
// 或
item.remove();

注意：删除元素后，相关引用若未清理，可能导致内存泄漏。

5. 操作元素的样式

操作样式有多种方式：

  • 直接修改元素的style属性，如element.style.color = 'red';
  • 修改className，增加或删除CSS类，通过classList管理样式类。

classList常用方法：

  • add(className)
  • remove(className)
  • toggle(className)
  • contains(className)

示例：

const box = document.querySelector('.box');
box.style.backgroundColor = 'blue';
box.classList.add('active');
box.classList.toggle('hidden');

注意：直接修改style属性只影响内联样式，且样式名称为驼峰式，如backgroundColor。

实例分析

实例一：动态添加列表项

背景：需要在页面中动态添加一个新的列表项。

代码示例：

const ul = document.getElementById('todo-list');
const li = document.createElement('li');
li.textContent = '学习DOM元素操作';
ul.appendChild(li);

分析：

  • 通过id获取ul元素。
  • 创建li元素并设置文本。
  • 使用appendChild插入新列表项。

结论：通过DOM操作实现动态内容添加，用户交互体验提升。

实例二：修改图片属性实现切换

背景：页面有一张图片，点击按钮可以切换图片。

代码示例：

const img = document.querySelector('#switch-img');
const btn = document.querySelector('#toggle-btn');
btn.addEventListener('click', () => {
  if(img.getAttribute('src') === 'img1.jpg') {
    img.setAttribute('src', 'img2.jpg');
  } else {
    img.setAttribute('src', 'img1.jpg');
  }
});

分析：

  • 通过getAttribute获取当前src。
  • 通过setAttribute修改src，实现图片切换。
  • 事件绑定实现交互。

结论：属性操作结合事件，实现动态效果。

实例三：删除指定元素

背景：用户点击删除按钮，移除对应的评论。

代码示例：

document.querySelectorAll('.delete-btn').forEach(button => {
  button.addEventListener('click', (e) => {
    const comment = e.target.closest('.comment');
    if(comment) {
      comment.remove();
    }
  });
});

分析：

  • 使用closest查找最近的父级评论元素。
  • 调用remove删除元素。
  • 事件委托也可优化性能。

结论：通过DOM操作实现元素的删除，提升用户体验。

常见误区

  • 误区1：直接操作innerHTML频繁导致性能下降

    • 正确做法：尽量减少innerHTML的使用，改用createElement和appendChild动态构建节点。

  • 误区2：忘记节点已存在时插入，导致节点被移除

    • 正确做法：插入节点前确认是否已在DOM中，避免意外移动。

  • 误区3：用getElementsByClassName返回集合时，误以为是静态快照

    • 正确做法：理解HTMLCollection是实时更新的，遍历时注意可能的动态变化。

  • 误区4：修改innerHTML导致事件绑定失效

    • 正确做法：修改内容时保留事件绑定或使用事件委托。

  • 误区5：直接修改style属性忽视驼峰命名规则

    • 正确做法：CSS属性名转换为驼峰式，如background-color改为backgroundColor。

应用场景

  • 动态内容生成：根据用户操作实时添加、修改网页内容，如添加评论、生成菜单。
  • 交互式UI组件：通过DOM操作实现选项卡切换、轮播图等交互功能。
  • 表单动态校验：修改表单元素属性及样式，提示用户输入错误。
  • 响应式样式调整：根据屏幕大小或用户行为动态修改样式。
  • 单页应用（SPA）视图更新：通过DOM操作动态渲染页面内容。

知识拓展

  • DOM节点类型细分：元素节点、文本节点、注释节点等，了解不同节点的特性。
  • 事件委托技术：利用事件冒泡机制，绑定父元素事件，提升性能。
  • 虚拟DOM概念：现代框架使用虚拟DOM减少直接操作，提高性能。
  • 性能优化策略：批量DOM操作、文档碎片(DocumentFragment)的使用。
  • 浏览器兼容性：不同浏览器对DOM操作支持的差异及解决方案。

总结回顾

本节深入讲解了DOM元素操作的核心内容，涵盖元素的查找、创建、插入、修改、删除和样式调整。通过实例演示了动态添加列表项、切换图片、删除评论等典型应用。介绍了常见误区，提醒考生注意性能和兼容性问题。掌握本节内容，有助于考生在Web程序设计中灵活运用DOM操作，实现丰富的网页交互效果。同时，理解DOM操作的原理和细节，为后续学习事件处理和高级前端技术奠定基础。

祝愿你通过系统学习DOM元素操作，打下扎实的前端基础，顺利通过全国计算机等级考试二级的Web程序设计科目！

重点知识点

1

DOM元素的查找方法及其区别

2

创建和插入DOM元素的步骤与方法

3

修改DOM元素属性与内容的技巧

4

删除DOM元素的常用方法

5

通过JavaScript操作元素样式的方式

6

常见误区及正确的DOM操作实践

7

动态网页交互中DOM元素操作的应用

8

性能优化与浏览器兼容性的注意事项