DOM是什么？如何操作网页元素？

、文本内容）都对应一个可编程的 JS 对象。它不等于原始 HTML 源码——比如你用 JS 修改了 innerHTML，DOM 树会立刻更新，但 document.documentElement.outerHTML 返回的是当前实时状态，未必和初始 HTML 一致。

常见误解：以为 document.getElementById('x') 返回的是字符串或 HTML 片段。实际返回的是一个 Element 对象，有属性（id、className）、方法（appendChild()、remove()）和事件接口（addEventListener()）。

获取元素最常用且安全的三种方式

优先按场景选，别无脑用 querySelector：

• document.getElementById('myBtn') —— 唯一 ID，最快，返回单个 Element 或 null
• document.querySelector('.nav-link[data-active="true"]') —— 支持任意 CSS 选择器，只返回第一个匹配项；若没匹配，返回 null（不是空数组！）
• document.querySelectorAll('input[type="checkbox"]') —— 返回 NodeList（类数组），可用 forEach，但不能直接用 map（需转成数组：[...nodeList].map(...)）

注意：getElementsByClassName 和 getElementsByTagName 返回的是动态 HTMLCollection，后续 DOM 变化会实时反映在该集合中，容易引发无限循环或意外重读 —— 新项目尽量避开。

修改内容、属性和样式的三类典型操作

不同目的必须用不同 API，混用会导致不可见副作用：

• 改显示文字：el.textContent = '新标题'（安全，防 XSS）；el.innerHTML = '强调'（危险，仅当可信 HTML 才用）
• 设属性：el.setAttribute('disabled', '') 或更推荐 el.disabled = true（布尔属性优先用点号赋值）
• 改样式：el.style.color = '#333'（仅内联样式）；批量改样式优先用 el.classList.add('active') 或 el.className = 'btn btn-primary'

性能提示：频繁修改多个样式时，避免连续写 el.style.xxx，应改用 el.className 切换预定义 CSS 类，或用 el.setAttribute('style', '...') 一次性写入。

事件绑定必须等元素存在，否则拿到 null

脚本执行早于 DOM 加载完成，是 getElementById 返回 null 的最常见原因：

• 把 JS 放在 前（最简单有效）
• 用 DOMContentLoaded 事件：

  document.addEventListener('DOMContentLoaded', () => { /* 此时 DOM 已就绪 */ });

• 不推荐 window.onload —— 它等图片、CSS 等全部资源加载完，延迟更高

另一个坑：给未来才插入的元素（如 AJAX 加载的列表项）绑定事件，不要反复绑定，改用事件委托：

document.querySelector('#list').addEventListener('click', e => { if (e.target.matches('.item-delete')) { /* 处理删除 */ } });

DOM 操作本身很简单，真正的复杂性来自时机判断、引用生命周期和事件流控制——比如移除元素后还试图访问它的 parentNode，或忘记解绑事件导致内存泄漏。这些细节比语法更值得花时间确认。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《DOM是什么？如何操作网页元素？》文章吧，也可关注golang学习网公众号了解相关技术文章。