JSDOM编程实战：事件属性与Dom扩展（样式与节点处理）

本篇笔记主要介绍了JavaScript DOM编程中的两个关键知识点：事件属性和DOM扩展。 **事件属性** 在DOM编程中，事件属性是处理用户与页面交互的核心。例如，在HTML中，`<div id="msgDiv" onclick="test()">`这一代码片段，实际上等同于在JavaScript中将`onclick`事件绑定到`msgDiv`元素上，使其点击时执行`test()`函数。在JavaScript中，我们可以直接通过`getElementById`方法获取元素，并将其`onclick`属性设置为一个函数，这展示了如何在JavaScript中动态地管理DOM元素的事件处理。 **DOM元素的样式管理** DOM元素的样式管理有两种机制。首先，可以直接通过`style`属性来设置元素的样式，如`<input type="button" id="btnStyle" style="font-size:40px;" value="测试Style">`，这时可以通过`getElementById("btnStyle").style.fontSize`获取字体大小。然而，如果样式是通过外部或内联样式表定义的，如`<style> #btnStyle { font-size:40px; }</style>`，则不能直接通过DOM的`style`属性获取，因为这种方式定义的样式会优先级更高。 **DOM扩展** 1. **nodeType属性**：DOM节点可以分为不同类型，包括元素、属性、文本、注释等。元素节点（如`<div>`）是由HTML标签创建的DOM对象，其`nodeType`属性通常为1。属性节点可以通过`attributes`属性获取，如`<div id="divMsg" name="td" gzitcast="广州.Net训练营">`中的`attributes`属性用于收集所有属性节点，通过`nodeType`和`nodeValue`属性分别获取节点类型和属性值。 2. **文本节点**：文本节点包含在HTML元素中，如`<div id="divMsg" ...>哇哈哈哈~~~我爱广州小蛮腰~~~~~~~~~~~~~!</div>`。操作文本节点可能涉及获取或替换节点内的文本内容，这对于动态更新页面显示非常重要。 总结来说，理解DOM事件属性的设置以及样式管理的两种方式对于开发人员来说至关重要，它涉及到页面交互的响应性和样式控制的灵活性。同时，掌握DOM节点类型和文本节点的处理技巧，能够帮助开发者更高效地操作DOM树，实现页面的动态更新和内容管理。