掌握HTML DOM属性访问技巧提升网页交互性能从基础到进阶全面解析属性获取与修改方法助你成为前端开发高手

威震华夏关云长 · 发表于 2025-8-31 15:10:00

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

引言

在现代Web开发中，文档对象模型（DOM）扮演着至关重要的角色。它是HTML和XML文档的编程接口，允许开发者和程序动态地访问和更新文档的内容、结构和样式。掌握DOM属性访问技巧不仅能提升网页的交互性能，还能帮助开发者构建更加高效、响应迅速的用户界面。本文将从基础到进阶，全面解析DOM属性的获取与修改方法，助你成为前端开发高手。

DOM基础：理解文档对象模型

什么是DOM

DOM（Document Object Model）是HTML和XML文档的编程接口，它将文档表示为一个节点树，其中每个节点代表文档的一部分（如元素、属性、文本等）。通过DOM，开发者可以使用脚本语言（如JavaScript）动态地访问和修改文档的各个方面。

<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到DOM世界</h1>
<p>这是一个关于DOM的示例段落。</p>
</body>
</html>

复制代码

上述HTML代码对应的DOM树结构如下：

Document
└── html
├── head
│ └── title
│ └── "示例页面"
└── body
├── h1
│ └── "欢迎来到DOM世界"
└── p
└── "这是一个关于DOM的示例段落。"

复制代码

DOM节点类型

DOM中包含多种节点类型，常见的有：

1. 元素节点（Element Node）：表示HTML元素，如<div>、<p>等。
2. 属性节点（Attribute Node）：表示元素的属性，如id、class等。
3. 文本节点（Text Node）：表示元素中的文本内容。
4. 文档节点（Document Node）：表示整个文档。

基础DOM属性访问方法

直接属性访问

最简单的DOM属性访问方式是通过JavaScript对象的属性直接访问。这种方式适用于大多数标准HTML属性。

// 获取元素
const element = document.getElementById('myElement');
// 访问和修改属性
element.id = 'newId'; // 修改id属性
element.className = 'newClass'; // 修改class属性
element.href = 'https://example.com'; // 修改a标签的href属性
// 访问属性值
const id = element.id; // 获取id属性值
const className = element.className; // 获取class属性值

复制代码

getAttribute()和setAttribute()方法

对于非标准属性或需要更精确控制的场景，可以使用getAttribute()和setAttribute()方法。

// 获取元素
const element = document.getElementById('myElement');
// 使用getAttribute获取属性值
const id = element.getAttribute('id');
const dataValue = element.getAttribute('data-custom');
// 使用setAttribute设置属性值
element.setAttribute('id', 'newId');
element.setAttribute('data-custom', 'customValue');

复制代码

属性（Property）与属性（Attribute）的区别

在DOM操作中，理解属性（Property）和属性（Attribute）的区别非常重要：

• 属性（Attribute）：是HTML标签中定义的属性，如<div id="myDiv" class="container">中的id和class。
• 属性（Property）：是DOM对象的属性，是JavaScript中的概念。

大多数情况下，属性（Attribute）和属性（Property）是同步的，但也有一些例外：

<input type="checkbox" id="myCheckbox" checked>

复制代码

const checkbox = document.getElementById('myCheckbox');
// 获取属性值（Attribute）
console.log(checkbox.getAttribute('checked')); // 返回 "checked"（初始状态）
// 获取属性值（Property）
console.log(checkbox.checked); // 返回 true（当前状态）
// 修改属性（Property）
checkbox.checked = false; // 复选框取消选中
console.log(checkbox.getAttribute('checked')); // 仍然返回 "checked"
console.log(checkbox.checked); // 返回 false
// 修改属性（Attribute）
checkbox.setAttribute('checked', 'checked'); // 复选框被选中
console.log(checkbox.checked); // 返回 true

复制代码

进阶DOM属性操作技巧

批量属性操作

当需要同时操作多个属性时，可以使用Object.assign()或自定义函数来批量设置属性，减少DOM操作次数，提升性能。

// 方法1：使用Object.assign()
const element = document.getElementById('myElement');
Object.assign(element, {
id: 'newId',
className: 'newClass anotherClass',
style: {
color: 'red',
fontSize: '16px'
}
});
// 方法2：自定义批量设置属性函数
function setAttributes(el, attrs) {
for (let key in attrs) {
if (attrs.hasOwnProperty(key)) {
if (key === 'style' && typeof attrs[key] === 'object') {
// 处理样式对象
Object.assign(el.style, attrs[key]);
} else {
el.setAttribute(key, attrs[key]);
}
}
}
}
// 使用自定义函数
setAttributes(element, {
'data-id': '123',
'data-name': 'example',
'aria-label': 'Example element',
style: {
backgroundColor: '#f0f0f0',
padding: '10px'
}
});

复制代码

性能优化的属性访问方法

频繁的DOM操作会导致性能问题，以下是一些优化技巧：

// 不好的做法：每次都查询DOM
function updateItems() {
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.style.color = 'red';
});
}
// 好的做法：缓存DOM引用
const items = document.querySelectorAll('.item');
function updateItems() {
items.forEach(item => {
item.style.color = 'red';
});
}

复制代码

// 不好的做法：多次DOM操作
const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
list.appendChild(item);
}
// 好的做法：使用DocumentFragment
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
fragment.appendChild(item);
}
list.appendChild(fragment);

复制代码

// 不好的做法：直接修改样式
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';
// 好的做法：使用requestAnimationFrame
requestAnimationFrame(() => {
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';
});

复制代码

自定义属性(data-*)的使用

HTML5引入了自定义数据属性（data-*），允许在HTML元素上存储自定义数据，这些数据不会影响页面的呈现，但可以通过JavaScript访问。

<div id="user" data-id="123" data-name="John Doe" data-email="john@example.com"></div>

复制代码

// 获取元素
const user = document.getElementById('user');
// 使用getAttribute访问
const userId = user.getAttribute('data-id'); // "123"
const userName = user.getAttribute('data-name'); // "John Doe"
// 使用dataset属性访问（更简洁）
const userId2 = user.dataset.id; // "123"
const userName2 = user.dataset.name; // "John Doe"
// 修改自定义属性
user.dataset.id = '456'; // 修改data-id
user.dataset.role = 'admin'; // 添加data-role
// 删除自定义属性
delete user.dataset.role; // 删除data-role

复制代码

自定义属性在实际开发中有很多用途，例如：

1. 存储与元素相关的数据
2. 实现组件状态管理
3. 传递配置参数

// 示例：使用data-*属性实现简单的选项卡组件
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const targetId = tab.dataset.target;
// 隐藏所有内容
contents.forEach(content => {
content.style.display = 'none';
});
// 显示目标内容
document.getElementById(targetId).style.display = 'block';
// 更新选项卡样式
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
});
});

复制代码

DOM属性与性能

重排（Reflow）与重绘（Repaint）

理解重排和重绘对于优化DOM操作性能至关重要：

• 重排（Reflow）：当DOM的变化影响了元素的几何属性（宽、高、位置等），浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。
• 重绘（Repaint）：当元素的外观发生变化，但没有影响布局，浏览器会将元素的新外观绘制到屏幕上。这个过程称为重绘。

重排（Reflow）：当DOM的变化影响了元素的几何属性（宽、高、位置等），浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。

重绘（Repaint）：当元素的外观发生变化，但没有影响布局，浏览器会将元素的新外观绘制到屏幕上。这个过程称为重绘。

重排的成本比重绘高得多，因此我们应该尽量减少重排操作。

以下操作会触发重排：

1. 添加或删除可见的DOM元素
2. 元素位置改变
3. 元素尺寸改变（包括外边距、内边距、边框厚度、宽度、高度等属性改变）
4. 内容改变（如文本改变或图片被另一个不同尺寸的图片替代）
5. 页面渲染器初始化
6. 浏览器窗口尺寸改变

如何减少DOM操作提升性能

// 不好的做法：多次修改样式，触发多次重排
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';
// 好的做法：一次性修改样式，只触发一次重排
element.style.cssText = 'width: 100px; height: 100px; background-color: red;';
// 或者使用class
element.className = 'new-class';

复制代码

// 不好的做法：直接操作可见DOM
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
list.appendChild(item);
}
// 好的做法：先克隆节点，操作后再替换
const list = document.getElementById('list');
const clone = list.cloneNode(false); // 浅克隆，不包含子节点
for (let i = 0; i < 1000; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
clone.appendChild(item);
}
list.parentNode.replaceChild(clone, list);

复制代码

虚拟DOM是现代前端框架（如React、Vue）广泛使用的技术，它通过在内存中维护一个虚拟的DOM树，计算出最小的DOM操作，然后批量应用到真实DOM上，从而提升性能。

// 简化的虚拟DOM示例
function createVirtualDOM(tag, props, children) {
return { tag, props, children };
}
function render(vdom, container) {
const element = document.createElement(vdom.tag);
// 设置属性
if (vdom.props) {
for (let key in vdom.props) {
if (vdom.props.hasOwnProperty(key)) {
element.setAttribute(key, vdom.props[key]);
}
}
}
// 添加子元素
if (vdom.children) {
vdom.children.forEach(child => {
if (typeof child === 'string') {
element.appendChild(document.createTextNode(child));
} else {
render(child, element);
}
});
}
container.appendChild(element);
}
// 使用虚拟DOM
const vdom = createVirtualDOM('div', { class: 'container' }, [
createVirtualDOM('h1', {}, ['Hello Virtual DOM']),
createVirtualDOM('p', {}, ['This is a paragraph.'])
]);
render(vdom, document.body);

复制代码

最佳实践

1. 减少DOM访问次数：缓存DOM引用，避免重复查询。
2. 批量操作DOM：使用文档片段（DocumentFragment）或离线节点进行批量操作。
3. 避免频繁读取布局信息：读取布局信息（如offsetWidth、offsetHeight等）会强制浏览器刷新布局队列，触发重排。

减少DOM访问次数：缓存DOM引用，避免重复查询。

批量操作DOM：使用文档片段（DocumentFragment）或离线节点进行批量操作。

避免频繁读取布局信息：读取布局信息（如offsetWidth、offsetHeight等）会强制浏览器刷新布局队列，触发重排。

// 不好的做法：在循环中读取布局信息
for (let i = 0; i < elements.length; i++) {
elements[i].style.width = elements[i].offsetWidth + 10 + 'px';
}
// 好的做法：先读取所有布局信息，再进行修改
const widths = Array.from(elements).map(el => el.offsetWidth);
for (let i = 0; i < elements.length; i++) {
elements[i].style.width = widths[i] + 10 + 'px';
}

复制代码

1. 使用事件委托：减少事件监听器的数量，提升性能。

// 不好的做法：为每个按钮添加事件监听器
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', () => {
// 处理点击事件
});
});
// 好的做法：使用事件委托
document.addEventListener('click', (event) => {
if (event.target.classList.contains('button')) {
// 处理点击事件
}
});

复制代码

1. 使用CSS动画代替JavaScript动画：CSS动画通常比JavaScript动画性能更好，因为它们可以由浏览器直接优化。

/* CSS动画 */
.element {
transition: transform 0.3s ease;
}
.element:hover {
transform: scale(1.1);
}

复制代码

// JavaScript动画（性能较差）
element.addEventListener('mouseenter', () => {
let scale = 1;
const animate = () => {
scale += 0.01;
element.style.transform = `scale(${scale})`;
if (scale < 1.1) {
requestAnimationFrame(animate);
}
};
animate();
});

复制代码

实战案例：使用DOM属性构建交互式网页

让我们通过一个完整的示例来应用我们学到的DOM属性访问技巧。我们将构建一个简单的任务管理应用，包含添加、删除、标记完成和筛选任务的功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务管理应用</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.task-form {
display: flex;
margin-bottom: 20px;
}
.task-input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 16px;
}
.task-submit {
padding: 10px 15px;
background: #5c67f2;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 16px;
}
.task-submit:hover {
background: #4a54e1;
}
.filters {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.filter {
padding: 10px 15px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.filter.active {
border-bottom: 2px solid #5c67f2;
color: #5c67f2;
}
.task-list {
list-style: none;
}
.task-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.task-checkbox {
margin-right: 10px;
}
.task-text {
flex: 1;
}
.task-text.completed {
text-decoration: line-through;
color: #999;
}
.task-delete {
background: #ff5252;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.task-delete:hover {
background: #ff3838;
}
.task-count {
text-align: center;
margin-top: 20px;
color: #999;
}
</style>
</head>
<body>
<h1>任务管理应用</h1>
<form class="task-form" id="taskForm">
<input type="text" class="task-input" id="taskInput" placeholder="添加新任务..." required>
<button type="submit" class="task-submit">添加</button>
</form>
<div class="filters">
<div class="filter active" data-filter="all">全部</div>
<div class="filter" data-filter="active">进行中</div>
<div class="filter" data-filter="completed">已完成</div>
</div>
<ul class="task-list" id="taskList"></ul>
<div class="task-count" id="taskCount">0 个任务</div>
<script>
// 使用立即执行函数表达式(IIFE)避免全局变量污染
(function() {
// DOM缓存
const taskForm = document.getElementById('taskForm');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
const taskCount = document.getElementById('taskCount');
const filters = document.querySelectorAll('.filter');
// 应用状态
let tasks = [];
let currentFilter = 'all';
// 初始化
function init() {
// 从本地存储加载任务
const savedTasks = localStorage.getItem('tasks');
if (savedTasks) {
tasks = JSON.parse(savedTasks);
renderTasks();
}
// 事件监听
taskForm.addEventListener('submit', handleAddTask);
// 使用事件委托处理筛选器点击
document.addEventListener('click', (event) => {
if (event.target.classList.contains('filter')) {
handleFilterChange(event.target.dataset.filter);
}
});
// 使用事件委托处理任务列表中的点击事件
taskList.addEventListener('click', handleTaskClick);
}
// 添加任务
function handleAddTask(event) {
event.preventDefault();
const taskText = taskInput.value.trim();
if (taskText) {
// 创建新任务
const newTask = {
id: Date.now(),
text: taskText,
completed: false
};
// 添加到任务数组
tasks.push(newTask);
// 保存到本地存储
saveTasks();
// 重新渲染任务列表
renderTasks();
// 清空输入框
taskInput.value = '';
taskInput.focus();
}
}
// 处理任务点击事件
function handleTaskClick(event) {
const target = event.target;
const taskItem = target.closest('.task-item');
if (!taskItem) return;
const taskId = parseInt(taskItem.dataset.id);
// 处理复选框点击
if (target.classList.contains('task-checkbox')) {
toggleTaskStatus(taskId);
}
// 处理删除按钮点击
if (target.classList.contains('task-delete')) {
deleteTask(taskId);
}
}
// 切换任务状态
function toggleTaskStatus(taskId) {
const task = tasks.find(t => t.id === taskId);
if (task) {
task.completed = !task.completed;
saveTasks();
renderTasks();
}
}
// 删除任务
function deleteTask(taskId) {
tasks = tasks.filter(t => t.id !== taskId);
saveTasks();
renderTasks();
}
// 处理筛选器变化
function handleFilterChange(filter) {
currentFilter = filter;
// 更新筛选器样式
filters.forEach(f => {
if (f.dataset.filter === filter) {
f.classList.add('active');
} else {
f.classList.remove('active');
}
});
renderTasks();
}
// 渲染任务列表
function renderTasks() {
// 使用文档片段批量操作DOM
const fragment = document.createDocumentFragment();
// 根据当前筛选器过滤任务
const filteredTasks = tasks.filter(task => {
if (currentFilter === 'all') return true;
if (currentFilter === 'active') return !task.completed;
if (currentFilter === 'completed') return task.completed;
});
// 如果没有任务，显示提示信息
if (filteredTasks.length === 0) {
const emptyMessage = document.createElement('li');
emptyMessage.textContent = currentFilter === 'all'
? '还没有任务，添加一个吧！'
: `没有${currentFilter === 'active' ? '进行中' : '已完成'}的任务`;
emptyMessage.style.textAlign = 'center';
emptyMessage.style.padding = '20px';
emptyMessage.style.color = '#999';
fragment.appendChild(emptyMessage);
} else {
// 创建任务项
filteredTasks.forEach(task => {
const taskItem = document.createElement('li');
taskItem.className = 'task-item';
taskItem.dataset.id = task.id;
// 复选框
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'task-checkbox';
checkbox.checked = task.completed;
// 任务文本
const taskText = document.createElement('span');
taskText.className = 'task-text';
if (task.completed) {
taskText.classList.add('completed');
}
taskText.textContent = task.text;
// 删除按钮
const deleteButton = document.createElement('button');
deleteButton.className = 'task-delete';
deleteButton.textContent = '删除';
// 添加到任务项
taskItem.appendChild(checkbox);
taskItem.appendChild(taskText);
taskItem.appendChild(deleteButton);
// 添加到文档片段
fragment.appendChild(taskItem);
});
}
// 清空任务列表并添加新内容
while (taskList.firstChild) {
taskList.removeChild(taskList.firstChild);
}
taskList.appendChild(fragment);
// 更新任务计数
updateTaskCount();
}
// 更新任务计数
function updateTaskCount() {
const activeTasks = tasks.filter(t => !t.completed).length;
taskCount.textContent = `${activeTasks} 个任务待完成`;
}
// 保存任务到本地存储
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// 初始化应用
init();
})();
</script>
</body>
</html>

复制代码

这个任务管理应用展示了多种DOM属性访问和操作的技巧：

1. DOM缓存：我们缓存了常用的DOM引用，避免重复查询。
2. 事件委托：我们使用事件委托处理筛选器和任务列表的点击事件，减少事件监听器的数量。
3. 批量DOM操作：使用文档片段（DocumentFragment）批量添加任务项，减少重排次数。
4. 自定义数据属性：使用data-id存储任务ID，方便在事件处理中识别任务。
5. 本地存储：使用localStorage保存任务数据，实现数据持久化。
6. 状态管理：使用JavaScript对象管理应用状态，通过渲染函数更新UI。

总结与展望

本文从基础到进阶，全面解析了HTML DOM属性的获取与修改方法，并探讨了如何通过优化DOM操作提升网页交互性能。我们学习了：

1. DOM基础概念和节点类型
2. 直接属性访问和getAttribute()/setAttribute()方法
3. 属性（Property）与属性（Attribute）的区别
4. 批量属性操作和性能优化技巧
5. 自定义属性（data-*）的使用
6. 重排与重绘的概念及其对性能的影响
7. 减少DOM操作的最佳实践

掌握这些技巧，将帮助你构建更加高效、响应迅速的网页应用。随着前端技术的不断发展，新的DOM操作方法和优化策略也在不断涌现。例如，现代前端框架（如React、Vue）通过虚拟DOM技术进一步优化了DOM操作，提供了更高级的抽象和更好的性能。

作为前端开发者，持续学习和实践这些技术，将使你能够构建出用户体验更好、性能更优的网页应用，真正成为前端开发高手。

活动公告

掌握HTML DOM属性访问技巧提升网页交互性能从基础到进阶全面解析属性获取与修改方法助你成为前端开发高手

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

塔罗

立华奏

站长推荐 /2

友情链接

Tencent QQ