HTML DOM方法知识点汇总
编程小白也能看懂的DOM操作全解析
什么是DOM？
DOM（Document Object Model）可以理解为浏览器将网页内容组织成的一个树状结构。想象一下家谱图，DOM就是网页的”家谱图”，每个HTML标签都是这个家谱中的一个成员（节点）。
通过JavaScript操作DOM，我们就可以改变网页内容、样式和结构，让网页动起来！
为什么DOM很重要？
DOM是网页交互的核心技术，没有它就无法实现：
- 动态更新网页内容
- 响应用户操作（点击、滚动等）
- 创建动画效果
- 表单验证
- 单页面应用（如React/Vue的基础）
简单说，想成为前端开发者，掌握DOM是必不可少的！
DOM树结构示意图（来源：W3Schools）
DOM核心方法分类讲解
document.getElementById(‘id’)
通过HTML元素的id属性获取元素。就像用身份证找人一样。
const userInput = document.getElementById(‘username’);
document.querySelector(‘selector’)
通过CSS选择器获取第一个匹配的元素。就像在人群中找第一个戴红帽子的人。
const button = document.querySelector(‘.btn’);
document.querySelectorAll(‘selector’)
获取所有匹配CSS选择器的元素，返回一个节点列表（类似数组）。
const items = document.querySelectorAll(‘.item’);
element.innerHTML
获取或设置元素的HTML内容。可以包含标签，功能强大但要小心使用。
div.innerHTML = ‘<strong>重要通知</strong>’;
element.textContent
获取或设置元素的纯文本内容（忽略HTML标签），更安全。
const text = p.textContent;
// 设置文本内容
p.textContent = ‘这是一段新文本’;
element.value
获取或设置表单元素的值（如input, select, textarea）。
const username = input.value;
// 设置输入框的值
input.value = ‘张三’;
element.getAttribute(‘attr’)
获取元素的属性值（如id、class、href等）。
const url = link.getAttribute(‘href’);
element.setAttribute(‘attr’, ‘value’)
设置元素的属性值。
img.setAttribute(‘src’, ‘new-image.jpg’);
element.removeAttribute(‘attr’)
删除元素的属性。
input.removeAttribute(‘disabled’);
element.hasAttribute(‘attr’)
检查元素是否有某个属性。
if (button.hasAttribute(‘disabled’)) {
console.log(‘按钮被禁用’);
}
element.style.property
直接修改元素的内联样式（单个CSS属性）。注意CSS属性名使用驼峰命名法。
div.style.backgroundColor = ‘blue’;
// 修改文字大小
p.style.fontSize = ’20px’;
element.classList
操作元素的class属性（推荐方式）：
- add(‘class’) – 添加类
- remove(‘class’) – 移除类
- toggle(‘class’) – 切换类（有则移除，无则添加）
- contains(‘class’) – 检查是否包含类
button.classList.add(‘active’);
// 切换dark-mode类
body.classList.toggle(‘dark-mode’);
document.createElement(‘tag’)
创建一个新的HTML元素（但还没有放入页面）。
const newDiv = document.createElement(‘div’);
parent.appendChild(element)
将元素添加为父元素的最后一个子元素。
container.appendChild(newDiv);
parent.removeChild(element)
从父元素中移除指定的子元素。
list.removeChild(list.firstChild);
parent.replaceChild(new, old)
用新元素替换父元素中的旧元素。
list.replaceChild(newItem, oldItem);
element.addEventListener(‘event’, handler)
为元素添加事件监听器（推荐方式）。
button.addEventListener(‘click’, function() {
alert(‘按钮被点击了!’);
});
element.removeEventListener(‘event’, handler)
移除事件监听器（需要引用同一个函数）。
💡 常见事件：click（点击）, mouseover（鼠标悬停）, mouseout（鼠标离开）, keydown（按键按下）, submit（表单提交）等。
event.preventDefault()
阻止事件的默认行为（如表单提交、链接跳转）。
event.preventDefault(); // 阻止表单提交
// 做表单验证…
});
DOM方法实战演示
下面是一个实时演示区域，你可以点击按钮查看DOM操作的实际效果：
- 项目 1
- 项目 2
DOM操作最佳实践
- 减少DOM操作： DOM操作比较”昂贵”，尽量减少操作次数
- 缓存查询结果： 重复查询同一个元素时，先把结果保存在变量中
- 使用事件委托： 当多个元素有相同事件时，在父元素上添加一个监听器
- 优先使用class操作： 样式操作尽量使用classList而不是直接修改style
- 注意innerHTML安全： 避免使用innerHTML插入不可信内容，防止XSS攻击