🌲 DOM
在JavaScript中，DOM（Document Object Model）是一个编程接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM将HTML或XML文档转换为一个对象模型，使得开发者可以使用JavaScript来操纵页面元素。
基础知识
掌握这些DOM相关的知识点对于前端开发者来说非常重要，因为它们是动态网页交互的基础。熟悉DOM操作和最佳实践可以帮助开发者创建更快速、更响应的网页应用。
-
DOM树和节点：
理解DOM是如何将HTML文档表示为树状结构的，包括各种类型的节点，如元素节点、文本节点、属性节点等。
掌握如何访问和操作这些节点。 -
元素选择：
熟悉不同的方法来选择DOM元素，如getElementById,getElementsByClassName,getElementsByTagName,querySelector,querySelectorAll等。
理解这些方法的差异和最佳使用场景。 -
创建、插入和删除节点：
学习如何使用createElement,createTextNode,appendChild,insertBefore,removeChild等方法来动态地修改DOM。
理解如何使用这些方法来添加、移动或删除页面元素。 -
修改元素属性和样式：
掌握如何读取和设置元素的属性（例如getAttribute和setAttribute）。
理解如何使用JavaScript来动态更改元素的样式。 -
事件处理：
掌握如何为DOM元素添加事件监听器来处理用户交互，如点击、键盘输入、鼠标移动等。
理解事件冒泡和捕获以及如何使用它们。 -
DOM遍历和搜索：
学习使用各种DOM遍历方法，如childNodes,parentNode,firstChild,lastChild,nextSibling,previousSibling等。
理解如何高效地搜索和遍历DOM树。 -
表单处理：
掌握如何使用DOM来处理表单输入，获取和设置表单字段的值。 -
性能考虑：
理解DOM操作可能对页面性能的影响，如重绘和重排。 学习如何优化DOM操作，减少页面的重绘和重排次数。 -
现代API和框架：
了解和使用现代的DOM API和JavaScript框架（如React, Vue, Angular）来简化DOM操作。 -
安全性：
理解DOM操作中的安全问题，如避免跨站脚本攻击（XSS）。