高效访问和修改DOM元素属性的方法

作为IT工程师，高效操作DOM元素属性是前端开发的核心技能之一。以下是几种高效的方法：

1. 选择元素的方法

// 通过ID获取（最快）
const elementById = document.getElementById('myId');

// 通过CSS选择器获取（现代浏览器中性能良好）
const element = document.querySelector('#myId .myClass');

// 获取多个元素
const elements = document.querySelectorAll('.myClass');

2. 访问和修改属性

标准属性

// 获取属性
const value = element.value;
const className = element.className;

// 设置属性
element.value = 'new value';
element.className = 'new-class';

自定义属性（data-*）

// HTML5推荐方式
element.dataset.myAttribute = 'value'; // data-my-attribute
const attrValue = element.dataset.myAttribute;

// 传统方式
element.setAttribute('data-my-attribute', 'value');
const attrValue = element.getAttribute('data-my-attribute');

3. 高效批量修改

// 使用classList代替className进行类操作
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');

// 使用style.cssText批量设置样式
element.style.cssText = 'color: red; font-size: 16px;';

// 使用Object.assign批量设置样式（现代方法）
Object.assign(element.style, {
  color: 'red',
  fontSize: '16px'
});

4. 性能优化技巧

1. 缓存DOM查询结果：避免重复查询

   const myElement = document.getElementById('myId');
   // 多次使用myElement而不是重复查询
   

2. 批量操作：使用文档片段或离线DOM

   const fragment = document.createDocumentFragment();
   // 向fragment中添加多个元素
   document.body.appendChild(fragment);
   

3. 减少重排和重绘：

   // 读取和写入分离
   const width = element.offsetWidth; // 读取
   element.style.width = (width + 10) + 'px'; // 写入
   

4. 使用现代API：

   // 使用MutationObserver监听DOM变化
   const observer = new MutationObserver(callback);
   observer.observe(targetNode, { attributes: true });
   

5. 现代框架中的最佳实践

在React/Vue/Angular等框架中，通常推荐： - 使用框架提供的状态管理而不是直接操作DOM - 使用refs而不是直接查询DOM - 遵循框架的数据绑定模式

通过以上方法，您可以高效、安全地访问和修改DOM元素属性，同时保持良好的应用性能。