document.getElementById 是修改已知 ID 元素内容最直接高效的方式，需确保 DOM 加载完成、ID 唯一，并优先用 textContent 更新纯文本以避免 XSS；动态添加节点应使用 createElement + appendChild 或 DocumentFragment。
用 document.getElementById 获取元素再修改内容最直接
多数场景下，你只是想改某个已知 ID 的区域文字或 HTML。这时候别绕弯，document.getElementById 是最快、兼容性最好（IE6+ 都支持）的方式。
常见错误是取到 null 后直接调用 .innerHTML，结果报错 Cannot set property 'innerHTML' of null —— 本质是 DOM 还没加载完就执行了 JS。
- 确保脚本放在
</body>前，或监听DOMContentLoaded事件 -
innerHTML会重写整个子树，有 XSS 风险；若只更新纯文本，优先用textContent - ID 必须唯一，重复 ID 时
getElementById只返回第一个匹配项
document.getElementById('title').textContent = '新标题';
document.getElementById('list').innerHTML = '<li>第一项</li><li>第二项</li>';
动态添加节点要用 createElement + appendChild
想往列表末尾追加一项，或者插入一个提示框？不能靠拼接字符串再赋值给 innerHTML，否则会销毁已有绑定的事件监听器和输入框焦点。
正确做法是创建真实节点，再挂载进去。注意：appendChild 会把节点从原位置移走（如果它已有父节点），所以多次调用要先 cloneNode(true)。
立即学习“Java免费学习笔记（深入）”；
-
createElement创建的是“空壳”，需用textContent或setAttribute补充内容和属性 - 批量插入多个节点时，用
DocumentFragment减少重排（reflow）开销 - 避免在循环里反复读取
offsetHeight等布局属性，会强制同步计算样式
const newItem = document.createElement('li');
newItem.textContent = '动态添加的第3项';
document.getElementById('list').appendChild(newItem);
用 querySelector 和 querySelectorAll 更灵活地定位元素
当目标没有 ID，或你想按类名、属性、伪类选中多个元素时，querySelector（返回第一个）和 querySelectorAll（返回 NodeList）是更现代的选择。
注意：querySelectorAll 返回的是静态 NodeList，不会随 DOM 变化自动更新；而 getElementsByClassName 返回的是实时 HTMLCollection，容易引发无限循环 bug。
- 支持复杂选择器，如
[data-status="pending"]、button:not([disabled]) - IE8+ 支持
querySelector，但不支持某些伪类（如:nth-child在 IE8 中无效） - 遍历
querySelectorAll结果时，不能直接用forEach（IE 不支持），得转成数组：Array.from(nodes).forEach(...)
const buttons = document.querySelectorAll('button[data-action]');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
btn.textContent = '已点击';
});
});
更新表单控件值别漏掉 value 和 checked 属性
改 input、select、checkbox 的“显示内容”，光设 textContent 或 innerHTML 没用 —— 它们的状态由对应属性控制。
尤其 checkbox/radio：DOM 属性 checked 决定是否勾选，而 HTML 属性 checked（即写在标签里的）只影响初始状态。运行时必须操作属性，不是属性节点。
-
input.value对应用户输入或脚本设置的当前值，input.getAttribute('value')只读初始值 - 多选 select 要遍历
options数组，逐个设selected属性 - 触发
change事件需手动dispatchEvent，浏览器不会自动补发
document.getElementById('username').value = 'admin';
document.getElementById('agree').checked = true;
const select = document.getElementById('country');
for (const opt of select.options) {
if (opt.value === 'CN') opt.selected = true;
}
实际项目里最容易被忽略的是事件监听器残留和异步时机问题：比如用 innerHTML 替换带按钮的区域后，原来绑的 click 事件就丢了；又或者在 fetch 回调里操作 DOM，却没检查元素是否还存在。这些细节比语法本身更影响稳定性。 
