js dom实现
DOM 操作基础
DOM（Document Object Model）是浏览器提供的 JavaScript 接口，用于操作网页内容。以下是核心方法：
获取元素
// 通过 ID
const el = document.getElementById('id');
// 通过类名（返回 HTMLCollection）
const els = document.getElementsByClassName('class');
// 通过标签名（返回 HTMLCollection）
const tags = document.getElementsByTagName('div');
// 通过 CSS 选择器（返回第一个匹配元素）
const q = document.querySelector('.class');
// 通过 CSS 选择器（返回 NodeList）
const qAll = document.querySelectorAll('div');修改内容
// 修改文本内容
el.textContent = '新文本';
// 修改 HTML 内容
el.innerHTML = '<strong>加粗文本</strong>';
// 修改属性
el.setAttribute('data-id', '123');
el.getAttribute('data-id');
el.removeAttribute('data-id');动态节点操作
创建/添加节点
// 创建新元素
const newEl = document.createElement('div');
// 添加到父元素末尾
parentEl.appendChild(newEl);
// 插入到指定位置
parentEl.insertBefore(newEl, referenceEl);删除/替换节点
// 删除节点
parentEl.removeChild(childEl);
// 替换节点
parentEl.replaceChild(newEl, oldEl);样式与类操作
直接修改样式
el.style.color = 'red';
el.style.backgroundColor = '#fff';类名操作
// 添加类
el.classList.add('active');
// 移除类
el.classList.remove('active');
// 切换类
el.classList.toggle('active');
// 检查类
const hasClass = el.classList.contains('active');事件处理
添加事件监听
el.addEventListener('click', (event) => {
console.log('元素被点击', event.target);
});移除事件监听
function handleClick() { /*...*/ }
el.addEventListener('click', handleClick);
el.removeEventListener('click', handleClick);表单操作
获取表单值
const input = document.querySelector('input');
console.log(input.value);
const select = document.querySelector('select');
console.log(select.value);监听表单事件
formEl.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止默认提交
// 处理表单数据
});性能优化技巧
批量 DOM 操作时使用 DocumentFragment：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const el = document.createElement('div');
fragment.appendChild(el);
}
document.body.appendChild(fragment);避免频繁重排：
// 读写分离（先读后写）
const width = el.offsetWidth;
el.style.width = width + 10 + 'px';
