六十天前端强化训练之第十天之DOM操作基础

=====欢迎来到编程星辰海的博客讲解======

一、DOM核心概念

1.1 DOM树结构

1.2 节点类型

1.3 节点关系

二、基本DOM操作

2.1 元素选择

2.2 元素创建/修改

2.3 节点操作

三、事件处理机制

3.1 事件流三个阶段

3.2 事件绑定

3.3 事件对象

四、动态表格案例

4.1 核心代码

4.2 实现效果

4.3 学习要点总结

4.4 扩展阅读推荐

官方文档

优质文章

推荐书籍

五、进阶技巧

一、DOM核心概念

1.1 DOM树结构

DOM（Document Object Model）将HTML文档表示为树形结构，由多个节点组成：

文档节点：整个文档的根节点
元素节点：HTML标签
属性节点：元素的属性
文本节点：元素包含的文本内容
注释节点：HTML注释

1.2 节点类型

每个DOM节点都有nodeType属性：

JAVASCRIPT

Node.ELEMENT_NODE(1)   // 元素节点
Node.ATTRIBUTE_NODE(2) // 属性节点
Node.TEXT_NODE(3)      // 文本节点
// ...其他类型

1.3 节点关系

parentNode
childNodes
firstChild/lastChild
nextSibling/previousSibling

二、基本DOM操作

2.1 元素选择

JAVASCRIPT

// 传统方法
document.getElementById('id')
document.getElementsByClassName('class')
document.getElementsByTagName('div')// 现代选择器
document.querySelector('#id') // 返回单个元素
document.querySelectorAll('.class') // 返回NodeList

2.2 元素创建/修改

JAVASCRIPT

// 创建元素
const newDiv = document.createElement('div')
const textNode = document.createTextNode('Hello')// 属性操作
element.setAttribute('data-id', '123')
element.classList.add('active')
element.style.color = 'red'// 内容操作
element.innerHTML = '<span>内容</span>'
element.textContent = '纯文本内容'

2.3 节点操作

JAVASCRIPT

// 插入节点
parent.appendChild(child)
parent.insertBefore(newNode, referenceNode)// 移除节点
parent.removeChild(child)
element.remove()// 替换节点
parent.replaceChild(newChild, oldChild)

三、事件处理机制

3.1 事件流三个阶段

捕获阶段（从上到下）
目标阶段
冒泡阶段（从下到上）

3.2 事件绑定

JAVASCRIPT

// 传统方式
button.onclick = function() {}// 现代方式
element.addEventListener('click', handler, useCapture)

3.3 事件对象

JAVASCRIPT

element.addEventListener('click', function(e) {e.preventDefault() // 阻止默认行为e.stopPropagation() // 阻止冒泡console.log(e.target) // 事件源
})

四、动态表格案例

4.1 核心代码

HTML

<!DOCTYPE html>
<html>
<head><style>table { border-collapse: collapse; width: 100%; }th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }th { background-color: #f2f2f2; cursor: pointer; }tr:hover { background-color: #f5f5f5; }.delete-btn { color: red; cursor: pointer; }</style>
</head>
<body><div id="controls"><button onclick="sortTable('name')">按姓名排序</button><button onclick="sortTable('age')">按年龄排序</button></div><table id="dataTable"><thead><tr><th>姓名</th><th>年龄</th><th>操作</th></tr></thead><tbody id="tableBody"></tbody></table><script>// 初始数据let data = [{ name: '王小明', age: 25 },{ name: '李华', age: 30 },{ name: '张强', age: 22 }];// 渲染表格function renderTable() {const tbody = document.getElementById('tableBody');tbody.innerHTML = '';// 使用文档片段优化性能const fragment = document.createDocumentFragment();data.forEach((item, index) => {const row = document.createElement('tr');// 姓名列const nameCell = document.createElement('td');nameCell.textContent = item.name;// 年龄列const ageCell = document.createElement('td');ageCell.textContent = item.age;// 操作列const actionCell = document.createElement('td');const deleteBtn = document.createElement('span');deleteBtn.className = 'delete-btn';deleteBtn.textContent = '删除';deleteBtn.onclick = () => deleteRow(index);actionCell.appendChild(deleteBtn);row.appendChild(nameCell);row.appendChild(ageCell);row.appendChild(actionCell);fragment.appendChild(row);});tbody.appendChild(fragment);}// 删除行function deleteRow(index) {data.splice(index, 1);renderTable();}// 表格排序function sortTable(field) {data.sort((a, b) => {if (typeof a[field] === 'string') {return a[field].localeCompare(b[field]);}return a[field] - b[field];});renderTable();}// 初始渲染renderTable();</script>
</body>
</html>

4.2 实现效果

初始显示数据表格
点击表头排序（姓名/年龄）
删除行操作
鼠标悬停高亮效果

4.3 学习要点总结

DOM操作基础

元素选择方法对比：querySelector vs getElementById
创建元素的两种方式：innerHTML vs createElement
文档片段优化批量插入

2.事件处理

事件委托的优势
动态元素的事件绑定
事件冒泡与阻止传播

3.性能优化

减少重排次数
合理使用事件委托
避免频繁操作DOM

4.数据驱动视图

保持数据与视图同步
单向数据流实现
响应式更新策略

4.4 扩展阅读推荐

官方文档

MDN DOM文档
W3C DOM规范
DOM Living Standard

优质文章

JavaScript性能优化之DOM操作
深入理解浏览器渲染原理
事件委托的原理与实践
现代JavaScript开发中的DOM操作最佳实践

五、进阶技巧

MutationObserver的使用

JAVASCRIPT

const observer = new MutationObserver(mutations => {mutations.forEach(mutation => {console.log('DOM发生变化:', mutation);});
});observer.observe(document.body, {childList: true,subtree: true,attributes: true
});