修改文档对象模型 (DOM)

DOM (Document Object Model) 修改是指通过 JavaScript 动态地更改网页的结构、内容和样式。以下是 DOM 修改的主要方法和技巧：

基本 DOM 修改操作

1. 选择元素

// 通过ID获取
const element = document.getElementById('myId');

// 通过类名获取（返回集合）
const elements = document.getElementsByClassName('myClass');

// 通过标签名获取（返回集合）
const divs = document.getElementsByTagName('div');

// 通过CSS选择器获取（返回第一个匹配元素）
const item = document.querySelector('.item');

// 通过CSS选择器获取所有匹配元素
const allItems = document.querySelectorAll('.item');

2. 修改内容

// 修改文本内容
element.textContent = '新文本内容';

// 修改HTML内容（注意XSS风险）
element.innerHTML = '<strong>加粗文本</strong>';

// 修改输入元素的值
inputElement.value = '新值';

3. 修改属性

// 设置属性
element.setAttribute('data-id', '123');

// 获取属性
const id = element.getAttribute('data-id');

// 移除属性
element.removeAttribute('data-id');

// 直接访问标准属性
element.id = 'newId';
element.className = 'new-class'; // 替换所有类
element.classList.add('new-class'); // 添加类
element.classList.remove('old-class'); // 移除类
element.classList.toggle('active'); // 切换类

4. 修改样式

// 直接修改样式
element.style.color = 'blue';
element.style.backgroundColor = '#f0f0f0';

// 添加/移除CSS类
element.classList.add('highlight');
element.classList.remove('inactive');

// 一次性修改多个样式
Object.assign(element.style, {
  color: 'red',
  fontSize: '20px',
  display: 'block'
});

高级 DOM 操作

1. 创建和添加元素

// 创建新元素
const newDiv = document.createElement('div');
newDiv.textContent = '我是新创建的div';

// 添加到父元素的末尾
parentElement.appendChild(newDiv);

// 插入到特定位置
parentElement.insertBefore(newDiv, referenceElement);

// 插入到特定元素之后
referenceElement.after(newDiv);

2. 移除元素

// 移除子元素
parentElement.removeChild(childElement);

// 现代方法（不需要知道父元素）
childElement.remove();

3. 克隆元素

// 浅克隆（不克隆子元素）
const shallowClone = element.cloneNode(false);

// 深克隆（克隆元素及其所有子元素）
const deepClone = element.cloneNode(true);

4. 替换元素

// 用新元素替换旧元素
parentElement.replaceChild(newElement, oldElement);

// 现代方法
oldElement.replaceWith(newElement);

性能优化技巧

1. 批量修改：使用文档片段减少重绘 ```javascript const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) { const div = document.createElement('div'); div.textContent = Item ${i}; fragment.appendChild(div); }

document.body.appendChild(fragment);

2. **离线操作**：先移除元素，修改后再添加回来
```javascript
const parent = element.parentNode;
const nextSibling = element.nextSibling;
parent.removeChild(element);

// 进行复杂的DOM操作...

parent.insertBefore(element, nextSibling);

3. 避免强制同步布局：不要在读取布局属性后立即修改样式

事件处理

// 添加事件监听器
element.addEventListener('click', function(event) {
  console.log('元素被点击了', event);
});

// 移除事件监听器
const handler = function() { console.log('处理点击'); };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

DOM 修改是现代 Web 开发中动态更新页面内容的基础技术，合理使用可以创建丰富的交互体验。