DOM 元素选择与操作

要操作页面上的元素，首先得找到它。JavaScript 提供了多种方法来选择 DOM 节点。

选择元素

querySelector() / querySelectorAll() — 推荐

使用 CSS 选择器语法查找元素：

javascript 
// 单个元素（返回第一个匹配的）
const title = document.querySelector('h1');
const main = document.querySelector('.main-content');
const btn = document.querySelector('#submit-btn');
const item = document.querySelector('ul li:first-child');

// 多个元素（返回 NodeList，类似数组）
const allParagraphs = document.querySelectorAll('p');
const activeItems = document.querySelectorAll('.active');
const links = document.querySelectorAll('nav a');

querySelectorAll 返回一个 NodeList（非动态集合），可对其使用 forEach：

javascript 
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
  button.style.margin = '0.5rem';
});

getElementById() / getElementsByClassName() — 传统方法

javascript 
const title = document.getElementById('title');
const items = document.getElementsByClassName('item');
const paragraphs = document.getElementsByTagName('p');

getElementById 比 querySelector('#id') 稍快（微优化场景），日常推荐统一使用 querySelector 以保持代码风格一致。

读取和修改内容

textContent — 纯文本

安全地读写元素的文本内容，不会解析 HTML：

javascript 
const heading = document.querySelector('h1');
console.log(heading.textContent); // 读取
heading.textContent = '新标题';   // 修改
html 
<h1>原始标题</h1>

innerHTML — HTML 内容

读写元素的 HTML 源码，会解析 HTML 标签：

javascript 
const container = document.querySelector('.container');

// 读取
console.log(container.innerHTML);

// 设置（会解析 HTML）
container.innerHTML = '<p>新内容</p>';

innerHTML 存在安全风险——如果将用户输入直接插入 innerHTML，恶意脚本会被执行（XSS 攻击）。优先使用 textContent 展示用户提供的文字。必须插入 HTML 时，确保内容经过消毒。

insertAdjacentHTML() — 精准插入

在不破坏现有内容的情况下插入 HTML：

javascript 
const list = document.querySelector('ul');

list.insertAdjacentHTML('beforeend', '<li>新项目</li>');
// beforebegin — 元素之前
// afterbegin  — 第一个子元素之前
// beforeend   — 最后一个子元素之后
// afterend    — 元素之后

操作属性

标准属性

HTML 元素的标准属性可以直接读写：

javascript 
const link = document.querySelector('a');
link.href = 'https://coodocs.com';
link.target = '_blank';

const img = document.querySelector('img');
img.src = 'new-photo.jpg';
img.alt = '新图片描述';

const input = document.querySelector('input');
input.value = '预设文字';
input.placeholder = '请输入';
input.disabled = true;

getAttribute() / setAttribute() — 所有属性

javascript 
const element = document.querySelector('div');
element.setAttribute('data-id', '42');
console.log(element.getAttribute('data-id')); // "42"
element.removeAttribute('data-id');

dataset — data-* 属性

javascript 
// <div data-user-id="42" data-role="admin">
const div = document.querySelector('div');
console.log(div.dataset.userId); // "42"
console.log(div.dataset.role);   // "admin"

div.dataset.status = 'active';
// <div data-user-id="42" data-role="admin" data-status="active">

注意命名转换：data-user-id → dataset.userId（连字符转驼峰）。

classList — 管理 CSS 类

javascript 
const element = document.querySelector('.box');

element.classList.add('highlight');     // 添加类
element.classList.remove('highlight');  // 移除类
element.classList.toggle('active');     // 切换（有则删，无则加）
element.classList.contains('active');   // 是否包含
element.classList.replace('old', 'new'); // 替换

classList 是对 class 属性最干净的操作方式——不需要手动拼接字符串。

操作 style

javascript 
const element = document.querySelector('.box');

element.style.color = '#2563eb';
element.style.fontSize = '18px';
element.style.display = 'none';

// 读取生效的样式（包括 CSS 文件中的样式）
const styles = getComputedStyle(element);
console.log(styles.color); // 当前实际渲染的颜色

直接操作 element.style 设置的是行内样式，优先级高于外部 CSS，除非外部 CSS 使用了 !important。对于批量样式修改，更好的做法是切换 class（element.classList.add('dark-theme')）而非逐个设置 style 属性。

元素尺寸与位置

javascript 
const element = document.querySelector('.box');

// 元素尺寸（含 padding）
element.clientWidth;
element.clientHeight;

// 元素尺寸（含 padding + border）
element.offsetWidth;
element.offsetHeight;

// 元素相对于视口的位置
const rect = element.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);

这些属性在实现滚动联动、懒加载、碰撞检测等场景中非常实用。