C3文档站 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';
}); javascript
const title = document.querySelector('h1');
const firstItem = document.querySelector('ul li:first-child');
document.write('<p>标题: ' + title.textContent + '</p>');
document.write('<p>第一个 li: ' + firstItem.textContent + '</p>');
const items = document.querySelectorAll('li');
items.forEach(item => {
item.style.color = '#2563eb';
}); html
<h1>DOM 示例页面</h1>
<div class="content">
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>getElementById() / getElementsByClassName() — 传统方法
javascript
const title = document.getElementById('title');
const items = document.getElementsByClassName('item');
const paragraphs = document.getElementsByTagName('p'); javascript
const title = document.getElementById('title');
const items = document.getElementsByClassName('item');
const paragraphs = document.getElementsByTagName('p');
document.write('<p>ID 元素: ' + title.textContent + '</p>');
document.write('<p>class="item" 数量: ' + items.length + '</p>');
document.write('<p>p 元素数量: ' + paragraphs.length + '</p>'); html
<h1 id="title">传统方法示例</h1>
<p class="item">项目 A</p>
<p class="item">项目 B</p>
<p class="item">项目 C</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');
document.write('<p>当前内容: ' + container.innerHTML + '</p>');
container.innerHTML = '<p>新内容</p>';
document.write('<p>修改后: ' + container.innerHTML + '</p>'); html
<div class="container">
<p>原始段落</p>
</div>innerHTML 存在安全风险——如果将用户输入直接插入 innerHTML，恶意脚本会被执行（XSS 攻击）。优先使用 textContent 展示用户提供的文字。必须插入 HTML 时，确保内容经过消毒。
insertAdjacentHTML() — 精准插入
在不破坏现有内容的情况下插入 HTML：
javascript
const list = document.querySelector('ul');
list.insertAdjacentHTML('beforeend', '<li>新增项目</li>');
document.write('<p>当前列表: ' + list.innerHTML + '</p>'); html
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>操作属性
标准属性
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('.demo-box');
element.setAttribute('data-id', '42');
document.write('<p>data-id: ' + element.getAttribute('data-id') + '</p>');
element.removeAttribute('data-id');
document.write('<p>移除后: ' + element.getAttribute('data-id') + '</p>'); html
<div class="demo-box">属性操作示例</div>dataset — data-* 属性
javascript
const div = document.querySelector('[data-user-id]');
document.write('<p>userId: ' + div.dataset.userId + '</p>');
document.write('<p>role: ' + div.dataset.role + '</p>');
div.dataset.status = 'active';
document.write('<p>status: ' + div.dataset.status + '</p>'); html
<div data-user-id="42" data-role="admin">用户面板</div>注意命名转换：data-user-id → dataset.userId（连字符转驼峰）。
classList — 管理 CSS 类
javascript
const element = document.querySelector('.box');
element.classList.add('highlight');
document.write('<p>包含 highlight: ' + element.classList.contains('highlight') + '</p>');
element.classList.remove('highlight');
element.classList.toggle('active');
document.write('<p>包含 active: ' + element.classList.contains('active') + '</p>');
element.classList.replace('active', 'highlight');
document.write('<p>包含 highlight: ' + element.classList.contains('highlight') + '</p>'); html
<div class="box">CSS 类操作示例</div>classList 是对 class 属性最干净的操作方式——不需要手动拼接字符串。
操作 style
javascript
const element = document.querySelector('.box');
element.style.color = '#2563eb';
element.style.fontSize = '18px';
element.style.fontWeight = 'bold';
const styles = getComputedStyle(element);
document.write('<p>颜色: ' + styles.color + '</p>');
document.write('<p>字号: ' + styles.fontSize + '</p>'); html
<div class="box">样式操作示例</div>直接操作 element.style 设置的是行内样式，优先级高于外部 CSS，除非外部 CSS 使用了 !important。对于批量样式修改，更好的做法是切换 class（element.classList.add('dark-theme')）而非逐个设置 style 属性。
元素尺寸与位置
javascript
const element = document.querySelector('.box');
document.write('<p>clientWidth: ' + element.clientWidth + '</p>');
document.write('<p>clientHeight: ' + element.clientHeight + '</p>');
document.write('<p>offsetWidth: ' + element.offsetWidth + '</p>');
document.write('<p>offsetHeight: ' + element.offsetHeight + '</p>');
const rect = element.getBoundingClientRect();
document.write('<p>top: ' + rect.top + ', left: ' + rect.left + '</p>');
document.write('<p>width: ' + rect.width + ', height: ' + rect.height + '</p>'); html
<div class="box" style="width:200px;height:100px;background:#e2e8f0;padding:16px;">尺寸示例</div>这些属性在实现滚动联动、懒加载、碰撞检测等场景中非常实用。