JavaScript DOM操作详解

DOM全称Document Object Model 是JavaScript操作网页内容的接口，它讲HTML文档表示为节点树，允许我们通过JavaScript动态的访问和更新HTML文档的内容、结构和样式。

一、获取 DOM 元素

        在对DOM进行操作之前，我们需要从节点树中去获取这个节点。

        1. 基本选择方法

//通过ID获取DOM元素
const elementById = document.getElementById('idName')

//通过类名获取元素集合
const elementsByClassName = document.getElementByClassName('className')

//通过标签名获取元素集合
const elementsByTag = document.getElementsByTagName('div')

//通过name属性获取元素集合
const elementsByName = document.getElementsByName（'name')

        2. 现代选择方法

// 通过CSS选择器获取第一个匹配元素
const element = document.querySelector('.class #id');

// 通过CSS选择器获取所有匹配元素(NodeList)
const elements = document.querySelectorAll('div.className');

二、DOM 遍历（如何在节点树中移动和访问不同的节点）

// 父节点
const parent = element.parentNode;

// 子节点
const children = element.childNodes; // 包含文本节点
const childrenElements = element.children; // 仅元素节点

// 第一个/最后一个子节点
const firstChild = element.firstChild;
const lastChild = element.lastChild;
const firstElementChild = element.firstElementChild;
const lastElementChild = element.lastElementChild;

// 兄弟节点
const nextSibling = element.nextSibling;
const previousSibling = element.previousSibling;
const nextElementSibling = element.nextElementSibling;
const previousElementSibling = element.previousElementSibling;

三、操作元素内容

// 获取/设置HTML内容
element.innerHTML = '<strong>新内容</strong>';

// 获取/设置文本内容(不解析HTML)
element.textContent = '纯文本内容';

// 获取/设置表单元素的值
inputElement.value = '新值';

四、操作元素属性

// 获取/设置标准属性
const href = linkElement.href;
imgElement.src = 'new-image.jpg';

// 通用属性操作方法
element.setAttribute('data-custom', 'value');
const value = element.getAttribute('data-custom');
element.removeAttribute('data-custom');
element.hasAttribute('data-custom'); // 返回布尔值

// class操作
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');
element.classList.contains('some-class'); // 返回布尔值

// 直接操作className
element.className = 'class1 class2';

五、创建和修改DOM节点

// 创建新元素
const newDiv = document.createElement('div');

// 添加子节点
parentElement.appendChild(newDiv);
parentElement.insertBefore(newDiv, referenceElement);

// 替换节点
parentElement.replaceChild(newDiv, oldChild);

// 移除节点
parentElement.removeChild(childToRemove);
// 或现代方法
childToRemove.remove();

// 克隆节点
const clonedNode = originalNode.cloneNode(true); // true表示深克隆

六、样式操作

// 直接操作style属性
element.style.color = 'blue';
element.style.backgroundColor = '#f0f0f0';

// 批量设置样式
element.style.cssText = 'color: blue; background: yellow;';

// 获取计算样式(只读)
const computedStyle = window.getComputedStyle(element);
const color = computedStyle.color;

七、事件处理

// 添加事件监听器
element.addEventListener('click', function(event) {
  console.log('元素被点击了', event.target);
});

// 移除事件监听器
const handler = function() { console.log('只触发一次'); };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

// 常见事件
// click, dblclick, mouseover, mouseout, mousedown, mouseup
// keydown, keyup, keypress
// focus, blur, change, submit
// load, resize, scroll

八、DOM 操作最佳实践

        1.缓存DOM查询结果：避免重复查询相同的DOM元素

// 不好
for(let i = 0; i < 100; i++) {
  document.querySelector('.item').style.color = 'red';
}

// 好
const item = document.querySelector('.item');
for(let i = 0; i < 100; i++) {
  item.style.color = 'red';
}

        2.批量DOM操作：使用文档片段(document fragment)减少重绘

const fragment = document.createDocumentFragment();
for(let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

        3.事件委托：利用事件冒泡处理动态内容

document.getElementById('parent').addEventListener('click', function(e) {
  if(e.target.classList.contains('child')) {
    // 处理子元素点击
  }
});

理解 DOM 操作对于构建交互式网页至关重要。基本选择方法（如 getElementById）适合简单场景且性能更好，而现代方法（如 querySelector）则提供了更灵活的 CSS 选择器支持。对于频繁操作，建议缓存 DOM 元素以提高性能。

在实际开发中，应根据需求选择合适的方法：

• 简单操作使用原生 DOM API

• 复杂交互考虑使用 jQuery 等库

• 大型项目推荐使用 React/Vue 等框架

记住：减少不必要的 DOM 操作可以显著提升页面性能！

希望这个总结能帮助你更好地掌握 JavaScript DOM 操作的精髓！