javascript如何操作DOM与处理浏览器事件【教程】

优先用 querySelector，它更灵活；getElementById 仅 ID 查找且性能敏感时略快；二者均需检查返回值或确保 dom 加载完成；事件一律用 addEventListener，支持多次绑定、捕获/冒泡控制及 once 选项；动态元素用事件委托；修改内容优先 textContent 防 xss，innerhtml 需过滤；操作前须确认元素存在、及时清理监听器、避免异步操作已销毁节点。

javaScript 操作 DOM 和处理事件本身不难，难在选错方法、忽略事件流、或没处理好元素不存在的边界情况。

用 querySelector 还是 getElementById？

优先用 querySelector，它更灵活，支持 css 选择器语法；但若只按 ID 查找且性能敏感（比如高频循环中），getElementById 略快且语义明确。

• querySelector 返回第一个匹配项，querySelectorAll 返回 nodeList（不是数组，需用 [...nodeList] 或 Array.from() 转换才能用 map/foreach）
• getElementById 参数不带 #，而 querySelector('#id') 必须带
• 如果元素还没加载完就调用，两者都返回 NULL —— 务必检查返回值，或把脚本放在