掌握DOM节点属性是JavaScript操作页面的基础。nodeType、nodeName、nodeValue用于获取节点类型和内容；id、className、innerHTML、textContent、style等属性用于操作元素的标识、样式和内容；parentNode、children、firstElementChild等结构属性可遍历节点关系；value、checked、disabled等表单属性用于控制表单元素状态。结合querySelector和事件处理，能高效实现动态交互。
在JavaScript中操作DOM时，了解节点的常用属性是基础。这些属性帮助开发者获取、修改元素内容、样式、结构等信息。以下是DOM节点中常见的属性及其用途。
节点基本信息属性
每个DOM节点都有一些描述其类型和结构的基本属性：
- nodeType：表示节点的类型，常见值有1（元素节点）、3（文本节点）、8（注释节点）、9（文档节点）。
- nodeName：返回节点名称，元素节点返回标签名（大写），文本节点返回#text。
- nodeValue：文本节点或注释节点的内容，元素节点通常为null。
元素节点常用属性
针对HTML元素节点（如div、p、span等），以下属性最常被使用：
- id：设置或返回元素的id属性值。
- className：设置或返回元素的class属性值（注意不是class，因为class是保留字）。
- innerHTML：获取或设置元素内部的HTML内容，包括标签。
- outerHTML：获取或替换整个元素及其内部内容的HTML字符串。
- textContent：获取或设置元素内的纯文本内容，不会解析HTML标签，更安全。
- style：用于获取或设置行内样式，返回CSSStyleDeclaration对象，可通过点语法设置样式如element.style.color = 'red'。
- attributes：返回元素所有属性的NamedNodeMap集合，可用于遍历属性。
节点关系与结构属性
这些属性用于访问节点之间的层级关系：
- parentNode：返回当前节点的父元素节点。
- parentElement：返回父元素节点，与parentNode类似，但只对元素节点有效（文本节点没有parentElement）。
- childNodes：返回包含所有子节点（包括文本、元素、注释）的类数组对象。
- children：只包含子元素节点的HTMLCollection，不包括文本和注释节点，更实用。
- firstChild / lastChild：分别返回第一个和最后一个子节点（可能是文本节点）。
- firstElementChild / lastElementChild：只返回第一个或最后一个元素类型的子节点。
- nextSibling / previousSibling：获取相邻的前后节点（任意类型）。
- nextElementSibling / previousElementSibling：只获取相邻的前后元素节点。
表单相关属性
对于表单元素（如input、select等），还有一些特定属性：
- value：获取或设置input、textarea、select等元素的值。
- checked：用于checkbox和radio，判断是否选中，返回布尔值。
- selected：用于option元素，表示是否被选中。
- disabled / readonly：控制元素是否禁用或只读。
基本上就这些。掌握这些属性能让你更灵活地操作页面结构和内容。实际开发中，结合querySelector、事件处理等方法使用，效果更佳。
