高效读取和修改DOM元素的属性和特性

在Web开发中，高效操作DOM元素的属性和特性是提升性能的关键。以下是几种高效的方法：

1. 属性(Properties) vs 特性(Attributes)

首先需要区分： - 属性(Properties)：DOM对象上的JavaScript属性（如element.id） - 特性(Attributes)：HTML标签上的原始属性（如<div id="myDiv">中的id）

2. 高效读取方法

属性读取

// 直接访问属性（最快）
const value = element.id;
const href = element.href;

特性读取

// getAttribute方法
const value = element.getAttribute('data-custom');

批量读取

// 使用dataset读取所有data-*特性
const data = element.dataset;

// 使用attributes读取所有特性（返回NamedNodeMap）
const attrs = element.attributes;

3. 高效修改方法

属性修改

// 直接赋值（最快）
element.id = 'newId';
element.className = 'new-class'; // 对于class

特性修改

// setAttribute方法
element.setAttribute('data-custom', 'value');

classList操作（推荐）

// 添加类
element.classList.add('new-class');

// 移除类
element.classList.remove('old-class');

// 切换类
element.classList.toggle('active');

样式修改

// 单个样式
element.style.color = 'red';

// 批量样式（更高效）
element.style.cssText = 'color: red; background: blue;';

// 或者（现代方法）
Object.assign(element.style, {
  color: 'red',
  backgroundColor: 'blue'
});

4. 性能优化技巧

1. 减少DOM访问：将DOM引用缓存到变量中

   const element = document.getElementById('myElement');
   // 多次使用element而不是每次都查询
   

2. 批量操作：使用文档片段或innerHTML进行批量修改

   const fragment = document.createDocumentFragment();
   // 添加多个元素到fragment
   parentElement.appendChild(fragment);
   

3. 使用现代API：

   // 使用classList而不是className
   // 使用dataset而不是getAttribute('data-*')
   

4. 避免强制同步布局：

   // 不好的做法（读取后立即写入导致布局抖动）
   const width = element.offsetWidth;
   element.style.width = (width + 10) + 'px';
   
   // 好的做法：批量读取然后批量写入
   

5. 使用requestAnimationFrame进行视觉变化：

   requestAnimationFrame(() => {
    element.style.transform = 'translateX(100px)';
   });
   

5. 特殊属性处理

• value属性：表单元素使用element.value而非getAttribute
• checked属性：复选框使用element.checked布尔值
• 自定义数据：优先使用dataset而非自定义特性

通过合理选择这些方法，可以显著提高DOM操作的性能。