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

作为IT工程师，在处理DOM操作时，效率至关重要。以下是一些高效访问和修改DOM元素属性的技巧：

访问DOM元素

1. 选择器方法

   // ID选择器 - 最快
   const elementById = document.getElementById('myId');
   
   // 类选择器
   const elementsByClass = document.getElementsByClassName('myClass');
   
   // 标签选择器
   const elementsByTag = document.getElementsByTagName('div');
   
   // querySelector - 更灵活但稍慢
   const element = document.querySelector('#myId .myClass');
   const elements = document.querySelectorAll('.myClass');
   

2. 遍历DOM

   // 父元素
   const parent = element.parentNode;
   
   // 子元素
   const firstChild = element.firstChild;
   const children = element.children;
   
   // 兄弟元素
   const nextSibling = element.nextSibling;
   const previousSibling = element.previousSibling;
   

修改属性

1. 标准属性

   // 获取属性
   const value = element.getAttribute('data-custom');
   
   // 设置属性
   element.setAttribute('data-custom', 'newValue');
   
   // 直接访问(对标准HTML属性)
   const id = element.id;
   element.className = 'new-class';
   

2. 数据集属性(data-*)

   // 访问
   const customData = element.dataset.customValue;
   
   // 修改
   element.dataset.customValue = 'newData';
   

3. 样式修改

   // 单个样式
   element.style.color = 'red';
   
   // 批量样式
   element.style.cssText = 'color: red; background: blue;';
   
   // 类名操作
   element.classList.add('new-class');
   element.classList.remove('old-class');
   element.classList.toggle('active');
   

性能优化技巧

1. 缓存DOM引用

   // 避免重复查询
   const myElement = document.getElementById('myElement');
   // 后续操作使用myElement变量
   

2. 批量操作

   // 使用DocumentFragment进行批量插入
   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
   }
   document.getElementById('list').appendChild(fragment);
   

3. 减少重排和重绘

   // 使用requestAnimationFrame进行动画
   function animate() {
    element.style.left = `${parseInt(element.style.left) + 1}px`;
    requestAnimationFrame(animate);
   }
   animate();
   

4. 事件委托

   // 在父元素上监听事件而不是每个子元素
   document.getElementById('parent').addEventListener('click', function(e) {
    if (e.target.classList.contains('child')) {
      // 处理子元素点击
    }
   });
   

5. 使用现代API

   // IntersectionObserver - 高效检测元素可见性
   const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 元素进入视口
      }
    });
   });
   observer.observe(element);
   

通过合理运用这些方法，可以显著提高DOM操作的效率，特别是在处理复杂页面或大量元素时。