节点类型与属性

在JavaScript中，节点类型与属性是DOM操作的核心概念。理解它们可以帮助开发者更高效地操作页面元素，处理动态交互逻辑。

节点类型的概念

DOM（文档对象模型）将HTML文档表示为树状结构，每个部分都是一个节点。节点类型通过nodeType属性标识，常见的类型包括：

• 元素节点（Node.ELEMENT_NODE，值为1）：如<div>、<p>等HTML标签。
• 文本节点（Node.TEXT_NODE，值为3）：元素内的文本内容。
• 属性节点（Node.ATTRIBUTE_NODE，值为2）：元素的属性，如class、id等（已废弃，通常直接通过元素属性访问）。
• 注释节点（Node.COMMENT_NODE，值为8）：HTML注释内容。

const div = document.createElement('div');
console.log(div.nodeType); // 1（元素节点）

const text = document.createTextNode('Hello');
console.log(text.nodeType); // 3（文本节点）

元素节点的属性

元素节点是DOM中最常用的类型，其属性分为两类：

标准属性

直接通过元素对象访问，例如：

• id：元素的唯一标识。
• className：元素的类名。
• style：内联样式对象。
• innerHTML：元素的HTML内容。

const el = document.getElementById('example');
el.className = 'active';
el.style.color = 'red';

自定义属性

通过dataset或getAttribute访问：

el.setAttribute('data-user', 'admin');
console.log(el.dataset.user); // "admin"

文本节点的操作

文本节点通过nodeValue或data属性修改内容：

const textNode = document.createTextNode('Initial');
textNode.nodeValue = 'Updated'; // 或 textNode.data = 'Updated'

属性节点的访问（历史用法）

早期DOM规范中，属性可通过attributes集合访问：

const attr = document.createAttribute('custom');
attr.value = 'value';
el.setAttributeNode(attr); // 不推荐，现代用法直接用setAttribute

节点关系属性

通过以下属性遍历节点树：

• parentNode：父节点。
• childNodes：子节点列表（包含文本节点）。
• firstChild/lastChild：首尾子节点。
• nextSibling/previousSibling：相邻兄弟节点。

const ul = document.querySelector('ul');
console.log(ul.childNodes); // 包含元素节点和文本节点（如换行符）

元素专属的遍历属性

针对元素节点的简化属性：

• children：仅包含元素子节点。
• firstElementChild/lastElementChild：首尾元素子节点。
• nextElementSibling/previousElementSibling：相邻元素兄弟节点。

for (const child of ul.children) {
  console.log(child.tagName); // 仅输出"LI"等元素节点
}

动态修改节点属性

通过方法动态操作属性：

• setAttribute(name, value)：设置属性。
• getAttribute(name)：获取属性。
• removeAttribute(name)：删除属性。
• hasAttribute(name)：检查属性是否存在。

el.setAttribute('aria-hidden', 'true');
if (el.hasAttribute('aria-hidden')) {
  el.removeAttribute('aria-hidden');
}

特殊属性示例

classList 操作

替代className的更灵活方式：

el.classList.add('new-class');
el.classList.toggle('active');
el.classList.replace('old', 'new');

value 与表单元素

表单元素的value属性与用户输入实时同步：

const input = document.querySelector('input');
input.value = 'default';
console.log(input.getAttribute('value')); // 可能仍为null（初始值）

节点类型判断方法

使用instanceof或节点类型常量：

if (node instanceof Element) {
  console.log('这是一个元素节点');
} else if (node.nodeType === Node.TEXT_NODE) {
  console.log('这是一个文本节点');
}

性能注意事项

频繁操作DOM属性时需注意：

1. 批量修改样式时使用classList而非逐个修改style。
2. 读取offsetHeight等布局属性会导致重绘，避免在循环中使用。

// 不佳实践
for (let i = 0; i < 100; i++) {
  el.style.width = `${i}px`; // 触发多次重排
}

// 改进方案
let styles = '';
for (let i = 0; i < 100; i++) {
  styles += `.box-${i} { width: ${i}px; }`;
}
document.head.insertAdjacentHTML('beforeend', `<style>${styles}</style>`);