DOM 操作

约 361 字大约 1 分钟

布欧-Lewyon

2026-05-16

DOM 选择器

// 单个元素
document.getElementById('app');
document.querySelector('.card');       // CSS 选择器，匹配第一个
document.querySelector('#app .title');

// 多个元素
document.getElementsByClassName('card');
document.getElementsByTagName('div');
document.querySelectorAll('.card');    // NodeList（可用 forEach）

元素操作

// 创建
const div = document.createElement('div');
const p = document.createElement('p');
const text = document.createTextNode('文本');

// 插入
parent.appendChild(div);                // 末尾追加
parent.prepend(div);                    // 开头插入
parent.insertBefore(div, reference);    // 指定位置前
parent.insertAdjacentElement('beforeend', div); // 灵活插入

// 删除
div.remove();                    // 直接移除
parent.removeChild(div);         // 父元素移除子元素
parent.replaceChild(newChild, oldChild);

// 克隆
const clone = div.cloneNode(true);  // true 表示深克隆

属性操作

// class 操作
div.classList.add('active');
div.classList.remove('hidden');
div.classList.toggle('visible');
div.classList.contains('active');  // true/false

// 属性
div.setAttribute('data-id', '123');
div.getAttribute('data-id');       // "123"
div.removeAttribute('disabled');
div.hasAttribute('data-id');       // true

// 数据属性（data-*）
div.dataset.id;          // "123"（自动解析 data-* 属性）
div.dataset.userRole;    // data-user-role → 驼峰

内容与样式

// 内容
div.textContent = '纯文本';         // 安全（不解析 HTML）
div.innerHTML = '<b>加粗</b>';      // ⚠️ XSS 风险
div.outerHTML;                      // 包含元素本身的 HTML

// 样式
div.style.color = 'red';
div.style.backgroundColor = '#1890ff';  // 驼峰命名
div.style.cssText = 'color: red; font-size: 16px;';

// 计算样式
const styles = getComputedStyle(div);
console.log(styles.color);  // 实际生效的样式

小结

操作	API
选择	`querySelector` / `querySelectorAll`
创建	`createElement` / `createTextNode`
插入	`appendChild` / `insertBefore` / `prepend`
类	`classList.add/remove/toggle`
属性	`setAttribute` / `dataset`
内容	`textContent`（安全） / `innerHTML`（风险）

上一节：Map 与 Set 下一节：事件模型与事件委托