掌握高级 DOM 操作技巧和性能优化
// 获取单个元素
const element = document.querySelector('.class');
const element2 = document.querySelector('#id');
const element3 = document.querySelector('div > p');
// 获取多个元素
const elements = document.querySelectorAll('p');
const elements2 = document.querySelectorAll('.item');
// 遍历结果
elements.forEach(element => {
console.log(element);
});| 方法 | 描述 | 返回值 |
|---|---|---|
| getElementById() | 通过 ID 获取元素 | 单个元素 |
| getElementsByClassName() | 通过类名获取元素 | HTMLCollection |
| getElementsByTagName() | 通过标签名获取元素 | HTMLCollection |
| getElementsByName() | 通过 name 属性获取元素 | NodeList |
// 创建元素节点
const div = document.createElement('div');
// 创建文本节点
const text = document.createTextNode('Hello');
// 创建注释节点
const comment = document.createComment('This is a comment');// 追加子节点
div.appendChild(text);
// 在指定位置插入节点
const parent = document.querySelector('.parent');
const beforeElement = document.querySelector('.before');
parent.insertBefore(div, beforeElement);
// 现代插入方法
parent.prepend(div); // 在开头插入
parent.append(div); // 在末尾插入
beforeElement.before(div); // 在前面插入
beforeElement.after(div); // 在后面插入// 删除子节点
parent.removeChild(child);
// 现代方法：直接删除自身
element.remove();// 替换节点
parent.replaceChild(newElement, oldElement);
// 现代方法oldElement.replaceWith(newElement);// 获取属性
const value = element.getAttribute('src');
// 设置属性
element.setAttribute('src', 'image.jpg');
// 移除属性
element.removeAttribute('src');
// 检查属性是否存在
const hasAttr = element.hasAttribute('src');
// 直接操作属性
element.id = 'new-id';
element.src = 'image.jpg';// classList API
// 添加类
element.classList.add('class1', 'class2');
// 移除类
element.classList.remove('class1');
// 切换类
element.classList.toggle('class1');
// 检查类是否存在
const hasClass = element.classList.contains('class1');
// 替换类
element.classList.replace('old-class', 'new-class');// 设置内联样式
element.style.color = 'red';
element.style.fontSize = '16px';
element.style.backgroundColor = '#f0f0f0';
// 获取内联样式
const color = element.style.color;// 获取计算样式
const computedStyle = window.getComputedStyle(element);
// 获取具体样式值
const color = computedStyle.color;
const fontSize = computedStyle.fontSize;
const width = computedStyle.width;// 使用文档片段
const fragment = document.createDocumentFragment();
// 批量创建元素
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = `Item ${i}`;
fragment.appendChild(div);
}
// 一次性插入到 DOM
document.body.appendChild(fragment);