应先检查 document.getelementbyid 返回值是否为 null 再操作，因未检查时调用 .innerhtml 或 .addeventlistener 会抛 typeerror；id 区分大小写且须唯一。
怎么用 document.getElementById 安全获取元素
直接调用 document.getElementById 但没检查返回值，是导致后续脚本报错最常见的原因——它在找不到元素时返回 null，而你接着调用 .innerHTML 或 .addEventListener 就会抛出 TypeError: Cannot read property 'xxx' of null。
实际做法要加一层存在性判断：
const el = document.getElementById('my-btn');
if (el) {
el.addEventListener('click', handleClick);
}
注意：ID 值必须严格匹配（区分大小写），且页面中不能有多个相同 ID——浏览器只返回第一个，但这是 HTML 结构错误，不是 JS 能修复的。
为什么 querySelector 比 getElementsByClassName 更实用
getElementsByClassName 返回的是 HTMLCollection，它是**实时集合**：DOM 变动后它自动更新，但没法用 forEach，也不能解构，容易在循环中因集合动态变化引发意外跳过或重复。
querySelector 和 querySelectorAll 返回的是静态 NodeList，支持遍历和现代数组方法：
document.querySelectorAll('.item').forEach(item => {
item.classList.add('processed');
});
更关键的是，querySelector 支持完整 CSS 选择器语法，比如 document.querySelector('form#login input[name="email"]')，一步到位，不用嵌套多层查找。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
修改 DOM 内容时，textContent 和 innerHTML 怎么选
核心区别在于是否解析 HTML 字符串：
-
textContent只当纯文本处理，自动转义所有标签字符（如<script></script>会显示为文字），适合展示用户输入、防 XSS -
innerHTML会解析并渲染 HTML，但若插入不可信内容（比如从 URL 参数或表单取的值），可能执行脚本或破坏结构
常见误用场景：把用户昵称直接塞进 innerHTML ——如果昵称是 "<img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="js怎么操纵浏览器DOM对象">"，就触发了 XSS。此时必须用 textContent。
事件绑定别在循环里反复写 addEventListener
下面这段代码看着自然，实则危险：
const buttons = document.querySelectorAll('.action');
for (let i = 0; i {
console.log(i); // 总是输出 buttons.length
});
}
问题出在闭包和变量提升：循环结束时 i 已是终值，所有回调共享同一个 i。解决方法有二：
- 用
for...of或forEach，避免作用域污染 - 给事件监听器传参：用
button.dataset.id存标识，回调里读取
另外，如果按钮是动态添加的（比如 AJAX 加载后插入），应改用事件委托：document.addEventListener('click', e => { if (e.target.matches('.dynamic-btn')) {...} })，否则新按钮永远绑不上事件。
document.getElementById 必然返回 null，这不是 API 问题，是执行顺序问题。要么把 script 放在 DOMContentLoaded 事件兜底。
