在前端开发中，通常会进行哪些类型的 DOM 操作？请列举并简要说明。
考察说明
考察候选人对 DOM 基本操作及其分类的掌握程度。
回答思路
- 【回答框架 1】DOM 操作主要包括选择元素、创建与插入节点、修改属性与内容、删除节点、以及事件绑定等。
- 【回答框架 2】选择元素常用 getElementById、getElementsByClassName、querySelector 和 querySelectorAll 等方法，其中 querySelectorAll 返回静态 NodeList，而 getElementsBy* 返回动态集合。
- 【回答框架 3】创建与插入节点使用 createElement、createTextNode、appendChild、insertBefore 等，现代浏览器也支持 insertAdjacentHTML 以字符串方式插入 HTML。
- 【回答框架 4】修改元素属性与内容可以通过 innerHTML、textContent、setAttribute 和直接操作 style 对象完成，textContent 比 innerHTML 更安全，不会解析 HTML 标签。
- 【回答框架 5】删除节点使用 removeChild 或直接调用 element.remove()，事件操作则通过 addEventListener 实现，可绑定多个处理函数并支持移除。
- 【关键点 1】选择元素：getElementById、querySelector 等，注意静态与动态集合的区别。
- 【关键点 2】创建和插入：createElement 与 appendChild 等。
- 【关键点 3】修改内容：textContent 与 innerHTML 的区别，textContent 更安全。
- 【关键点 4】删除节点：removeChild 或 remove()。
- 【关键点 5】事件操作：addEventListener 和 removeEventListener。
- 【易错点 1】将 getElementsBy* 返回的 HTMLCollection 误认为静态集合，可能导致意外行为。
- 【易错点 2】滥用 innerHTML 可能带来 XSS 风险，以及性能问题。
- 【易错点 3】在循环中频繁操作 DOM 会引发重排重绘，应尽量使用文档碎片或批量更新。