js实现dom
实现DOM操作的方法
使用JavaScript操作DOM（文档对象模型）是前端开发的核心技能之一。以下是几种常见的DOM操作方法：
创建元素
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';
document.body.appendChild(newElement);修改元素内容
const element = document.getElementById('target');
element.innerHTML = '<strong>修改后的内容</strong>';
element.textContent = '纯文本内容';添加/删除类名
const box = document.querySelector('.box');
box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('visible');事件监听
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('按钮被点击');
});样式操作
const header = document.querySelector('header');
header.style.backgroundColor = '#333';
header.style.color = 'white';高效DOM操作技巧
批量修改DOM时，使用文档片段(documentFragment)可以减少重绘和回流次数：
const fragment = document.createDocumentFragment();
for(let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `项目 ${i}`;
fragment.appendChild(item);
}
document.getElementById('list').appendChild(fragment);使用事件委托提高性能：
document.getElementById('parent').addEventListener('click', function(e) {
if(e.target.classList.contains('child')) {
console.log('子元素被点击');
}
});现代DOM API
使用insertAdjacentHTML快速插入HTML：
document.getElementById('container').insertAdjacentHTML(
'beforeend',
'<div class="new-item">新项目</div>'
);使用matches方法检查元素是否匹配选择器：
if(element.matches('.active.highlight')) {
// 元素同时有active和highlight类
}使用closest查找最近的祖先元素：
const closestList = item.closest('ul');这些方法涵盖了DOM操作的主要方面，从基础创建修改到性能优化技巧。实际开发中应根据具体场景选择最合适的方法。
