javascript如何操作DOM元素_怎样动态修改内容【教程】

最稳妥的DOM操作是先用getElementById或querySelector获取元素，再检查是否为null；优先用textContent防XSS，批量更新用DocumentFragment减少重排，修改样式用classList而非className。

用 getElementById 或 querySelector 获取元素最稳妥

直接操作 DOM 前必须先拿到目标元素，getElementById 性能好、语义明确，适合有唯一 id 的场景；querySelector 更灵活，支持 CSS 选择器（如 .item、[data-type="alert"]），但要注意它只返回第一个匹配项。

常见错误：用 getElementsByClassName 返回的是 HTMLCollection，不是单个元素，直接调用 .innerHTML 会报 undefined is not an object。

• 优先写 const el = document

  

  .getElementById('my-box')，再判断 el 是否为 null
• 用 querySelector 时，建议加空格容错：document.querySelector('.container .content') 比 document.querySelector('.container.content') 更不易误匹配
• 避免在 DOM 尚未加载完成时查询，脚本放