跳到主要内容

DOM操作

节点操作​

  1. 节点选择
// 现代选择器
const element = document.querySelector('.class');
const elements = document.querySelectorAll('.class');

// 传统选择器
const elementById = document.getElementById('id');
const elementsByClass = document.getElementsByClassName('class');
  1. 节点创建与修改
// 创建元素
const div = document.createElement('div');
div.className = 'new-class';
div.textContent = '新元素';

// 插入元素
parentElement.appendChild(div);
parentElement.insertBefore(div, referenceElement);

// 删除元素
element.remove();
parentElement.removeChild(element);

属性操作​

// 获取属性
element.getAttribute('class');
element.className;
element.classList;

// 设置属性
element.setAttribute('class', 'new-class');
element.className = 'new-class';
element.classList.add('new-class');

// 样式操作
element.style.color = 'red';
element.style.backgroundColor = '#fff';

事件处理​

// 事件监听
element.addEventListener('click', (e) => {
  console.log('点击事件');
});

// 事件委托
parentElement.addEventListener('click', (e) => {
  if (e.target.matches('.child-class')) {
    console.log('子元素点击事件');
  }
});

DOM性能优化​

  1. 批量操作
  2. 文档片段
  3. 虚拟列表
  4. 防抖和节流