javascript DOM是什么_如何使用javascript操作网页元素？_技术教程

DOM是浏览器提供的HTML对象树接口，非JS原生；推荐用querySelector系列获取元素；更新内容优先用textContent防XSS；修改样式用el.style而非setAttribute；事件绑定必须用addEventListener并注意解绑与委托。

DOM 是浏览器把 HTML 转成的对象树，不是 JS 自带的

DOM（Document Object Model）不是 JavaScript 语言的一部分，而是浏览器提供的编程接口。HTML 文档被加载后，浏览器会解析它，生成一棵节点树——每个 、

、甚至文本和注释，都变成一个对象（比如 HTMLElement 或 Text），挂载在全局 document 对象下。JS 通过操作这棵树来改变页面内容、结构或样式。用 document.querySelector 和 document.querySelectorAll 找元素最稳妥
别再无脑用 getElementById 或 getElementsByClassName 了——它们返回的是“活的”集合（HTMLCollection），容易因 DOM 变动引发意外；而 querySelector 系列返回的是快照（Element 或静态 NodeList），行为更可预测。


document.querySelector('.btn') 返回第一个匹配的元素，没找到就返回 null（注意判空）

document.querySelectorAll('input[name="email"]') 返回所有匹配的元素，结果是只读的 NodeList，不能直接用 .push()，但能用 forEach

选择器支持完整 CSS 语法，包括伪类：document.querySelector('button:disabled') 合法
避免写太长的选择器链，比如 div#app > section.main ul li a[href^="/post"] —— 维护性差，也容易因 DOM 微调而断裂

修改元素内容别只记得 innerHTML，小心 XSS 和性能
innerHTML 看似方便，但它会触发 HTML 解析、重建子节点，开销大；更重要的是，如果插入用户输入的内容（比如表单值），不转义就直接拼进去，等于打开 XSS 漏洞。

纯文本更新优先用 textContent：el.textContent = 'Hello ' 会原样显示，不会执行脚本
要插 HTML 片段且确认来源可信，才用 innerHTML；否则先用 DOMPurify.sanitize(htmlStr) 过滤
批量更新多个子节点？别反复设 innerHTML。用 document.createDocumentFragment() 先组装，再一次性 appendChild

改样式别直接拼字符串：el.style.color = 'red' 比 el.setAttribute('style', 'color:red;')  更安全、更易维护

事件绑定要用 addEventListener，别写 onclick=...

内联事件（如 ）把结构和逻辑耦合死，无法动态控制，也不支持事件捕获、不支持多次绑定同一事件类型。现代写法必须用 addEventListener。

同一个元素可以多次调用 addEventListener('click', fn1) 和 addEventListener('click', fn2)，互不影响
需要解绑时，必须传入**同一个函数引用**：el.addEventListener('click', handler) → el.removeEventListener('click', handler)；用匿名函数就永远解不掉
监听委托场景（比如列表项动态增删），绑定到父容器，用 event.target 判断实际点击元素：listEl.addEventListener('click', e => { if (e.target.matches('li.delete-btn')) { /* ... */ } })

注意默认行为：表单提交、链接跳转等，该 e.preventDefault() 就得调，别漏
const form = document.querySelector('#search-form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面刷新
  const query = document.querySelector('#q').value.trim();
  if (!query) return;
  fetch(`/api/search?q=${encodeURIComponent(query)}`)
    .then(r => r.json())
    .then(data => {
      const list = document.querySelector('#results');
      list.innerHTML = data.map(item => 
        `${item.title}`
      ).join('');
    });
});
DOM 操作看着简单，但真正稳定可靠的关键，在于理解「什么时候节点还没就绪」「哪些 API 返回的是实时集合」「事件绑定后有没有内存泄漏风险」——这些细节不踩一两次坑，很难有体感。