DOM是浏览器将HTML映射为树形JS对象的标准接口，document为根节点；操作需先用getElementById或querySelector定位元素，优先用textContent改文本，innerHTML仅用于可信HTML结构，批量更新应使用DocumentFragment减少重排。
DOM 是浏览器把 HTML 变成对象的那套规则
DOM（Document Object Model）不是 JavaScript 独有的，而是浏览器提供的一套接口标准，它把整个 HTML 页面映射成一棵树形结构的对象——document 就是这棵树的根节点。JavaScript 通过操作这些对象，就能读取、添加、删除或修改页面内容。关键点在于：你写的 HTML 不是“静态文本”，一旦加载进浏览器，就自动转成了可编程的 JS 对象集合。
用 getElementById 和 querySelector 找到要改的元素
想改内容，第一步永远是“找到它”。这两个方法最常用，但行为不同：
-
getElementById只能按id查，速度快，返回单个元素（找不到时返回null） -
querySelector支持 CSS 选择器语法（比如"#header"、".item:last-child"），更灵活，但只返回第一个匹配项；要用全部匹配项得用querySelectorAll（返回NodeList） - 别用
getElementsByName或getElementsByTagName做精确操作——它们返回的是动态集合，容易引发意料外的重排或循环陷阱
const title = document.getElementById("main-title");
title.textContent = "新标题"; // 推荐：只改文本，不触发 HTML 解析
const banner = document.querySelector(".hero-banner");
banner.innerHTML = "限时优惠"; // 谨慎：会重新解析 HTML，可能执行 script 或丢失事件监听器
textContent vs innerHTML：改文字还是改结构？
这是最容易出错的地方。表面看都能“改内容”，但底层机制完全不同：
-
textContent把值当纯字符串插入，不解析 HTML 标签，安全、快，适合更新文字内容 -
innerHTML把字符串当作 HTML 片段解析并渲染，会重建子节点，可能触发脚本执行、丢失绑定的事件监听器，还存在 XSS 风险（如果值来自用户输入且未转义） - 如果只是替换一段文字，永远优先用
textContent；只有明确需要插入带标签的结构时，才用innerHTML，并且确保内容可信或已做DOMPurify这类清理
批量更新用 DocumentFragment 减少重排
一次插入几十个 li，如果逐个调用 appendChild，浏览器会反复重排重绘，卡顿明显。正确做法是先在内存中组装好，再一次性挂载：
什么是企业WAP网站，企业3G网站 企业WAP网站一般是指展示企业形象，介绍企业产品的WAP手机网站或者3G手机网站，让客户可以通过手机就能了解一个企业的大体情况和产品内容，从而更广泛的宣传企业，赢得更多的客户关注度！一般企业WAP网站包括：公司介绍，产品介绍，企业新闻动态，服务范围介绍，留言板，企业招聘信息等内容，如果有特殊要求，我们也会按照客户的要求定做。 企业为何要建设手机WAP网站，3
立即学习“Java免费学习笔记（深入）”；
const fragment = document.createDocumentFragment();
for (let i = 0; i < 50; i++) {
const item = document.createElement("li");
item.textContent = `条目 ${i + 1}`;
fragment.appendChild(item); // 不会触发渲染
}
document.querySelector("#list").appendChild(fragment); // 仅一次真实 DOM 操作
现代框架（如 React）的虚拟 DOM 本质也是这个思路的延伸：延迟、合并、最小化真实 DOM 变更。手写 JS 时，别跳过这一步。
真正麻烦的不是“怎么改”，而是“什么时候改”——比如在 DOMContentLoaded 之前访问 document.getElementById，拿到的一定是 null；或者用 innerHTML 替换含 input 的区域，用户正在输入的内容就丢了。这些细节比语法更重要。
