DOM节点操作是直接操控内存中的实时树结构，而非修改HTML字符串；节点是带方法属性的活对象，需注意文本节点与元素节点区别、“实时集合”遍历陷阱、增删本质为指针移动，以及事件绑定中addEventListener优于onclick属性。
DOM节点操作不是“改HTML字符串”，而是直接操控浏览器内存里一棵实时更新的树。你可以把它想象成一张活的家族族谱：每个标签（<div>、<p>）是一个人，文本、注释、属性都是不同身份的家庭成员；父子、兄弟关系就是他们之间的血缘线。JavaScript做的所有事——查、增、删、改、绑事件——都是在这张族谱上动手，页面立刻同步变化，因为这棵树和渲染结果是绑定的。
节点不是标签，是带行为的对象
很多人以为document.getElementById('box')拿到的是那段HTML代码，其实它返回的是一个有方法、有属性、能监听点击的“活对象”。比如：
-
node.nodeType === 1表示这是元素节点（<div>） -
node.firstChild可能是换行或空格产生的文本节点（nodeType === 3），不是你想要的子元素 -
node.children只返回元素节点，node.childNodes连空格和回车都算——这就是为什么用children更安全
“实时集合”会咬人，得小心遍历
像document.getElementsByClassName('item')返回的不是快照，而是一个“自动刷新的名单”。如果你一边循环它，一边删除其中的元素，列表长度会动态缩短，但循环索引还在往前走，结果就跳过某些项，甚至报错。解决办法很简单：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 先转成数组：
Array.from(list)或[...list] - 倒着遍历：
for (let i = list.length - 1; i >= 0; i--) - 用
querySelectorAll代替——它返回的是静态 NodeList，不会自动更新
增删节点本质是“移动指针”，不是拼字符串
用innerHTML = 'xxx'看起来快，其实是让浏览器丢掉整棵子树，再重新解析HTML、创建节点、插入树中——重排重绘开销大。而原生节点操作是精细调控：
-
document.createElement('li')是新建一个空的<li>对象 -
li.appendChild(document.createTextNode('内容'))是把文本对象“挂”到li下面 -
ul.insertBefore(li, ul.firstChild)是在树里调整父子/兄弟指针位置 - 推荐批量操作时用
DocumentFragment做中转站，避免反复触发渲染
事件绑定不是写在HTML里就完事了
<button onclick="alert(1)">只是给按钮加了一个叫onclick的字符串属性，浏览器发现后才悄悄绑定事件；而btn.addEventListener('click', fn)是真正在这个按钮对象上注册一个监听器。关键区别在于：
- 一个元素可以绑定多个
addEventListener，但onclick只能存一个函数 - 动态插入的新按钮，
onclick属性不会自动生效，但委托给父级的addEventListener能捕获到 - 事件委托能大幅减少内存占用——100个按钮共用1个监听器，而不是100个
