一次性搞定JS的DOM操作
内容提要
DOM（文档对象模型）是浏览器提供的API，用于通过JS操作页面元素。DOM树是页面元素的树状结构，学习DOM包括元素之间的联系、获取元素、节点类型和DOM架构。元素的导航包括父节点、兄弟节点和子节点。获取元素的方法有querySelector和querySelectorAll。节点的特点包括nodeName、innerHTML和textContent。元素的特性包括attribute和property，可以通过classList和style进行操作。常见的元素操作有创建、插入、移除和克隆元素。还有关于元素和窗口大小以及滚动的操作。
延伸解读
DOM：JS与页面交互的桥梁
文章强调DOM是浏览器提供的API，本质是让JS操作页面元素的接口。所有操作从document开始，通过DOM树结构访问节点。理解这一点有助于把握框架底层原理，即使日常开发不直接操作DOM，也能更好地理解现代前端工具的工作方式。
节点与元素：导航时的关键区分
文章指出节点包括元素、文本、注释等，而元素仅指HTML元素。导航时，节点属性如childNodes会包含所有节点，元素属性如children只包含元素。实际开发中，若只想操作元素，应使用元素导航属性，避免误操作文本或注释节点。
attribute与property：理解动态更新
文章解释attribute是HTML特性，property是DOM对象属性。标准attribute会映射为property，且多数情况下两者同步。但input的value例外，只能通过attribute修改。推荐使用property进行设置和获取，因为它有类型支持，操作更直观。
样式操作：class与style的选择
文章建议优先通过动态修改class来改变样式，这样能保持CSS与JS的分离，便于维护。当需要精确修改单个CSS属性时，再使用style。读取样式时，内联样式可直接通过style读取，而CSS文件中的样式需用getComputedStyle获取。
Q&A
DOM是什么？
DOM（文档对象模型）是浏览器提供的API，用于通过JavaScript操作页面元素。
如何获取DOM元素？
可以使用querySelector和querySelectorAll方法来获取DOM元素。
DOM树是什么？
DOM树是页面元素的树状结构，根节点是DOCUMENT，包含html、head、body等元素。
如何操作DOM元素的属性？
可以使用elem.getAttribute、elem.setAttribute和elem.removeAttribute等方法来操作元素的属性。
DOM中节点的特点有哪些？
节点的特点包括nodeName、tagName、innerHTML、textContent等。
如何动态修改元素的样式？
可以通过classList动态增加类，或直接修改style属性来动态修改元素的样式。
