课程进度 48% · 第10/20章第10/20章 · 标签 1/2
— 1 —
DOM基础
DOM（文档对象模型）将HTML文档表示为树结构，允许JS操作页面元素。
节点操作
- 获取元素：getElementById、querySelector、querySelectorAll
- 创建节点：createElement、createTextNode
- 添加节点：appendChild、insertBefore
- 删除节点：removeChild
javascript
1
// DOM操作
2
const div = document.createElement('div');
3
div.textContent = 'Hello';
4
div.classList.add('box');
5
document.body.appendChild(div);
6
// 查找
7
const el = document.querySelector('.box');
8
const items = document.querySelectorAll('li');
— 2 —
属性与样式操作
javascript
1
// 属性操作
2
el.setAttribute('data-id', '123');
3
el.getAttribute('data-id');
4
el.removeAttribute('disabled');
5
// 样式操作
6
el.style.color = 'red';
7
el.style.backgroundColor = 'blue';
8
el.classList.add('active');
9
el.classList.toggle('visible');
DOMquerySelectorcreateElement操作遍历