【js篇】常见的DOM操作在Web开发中，DOM（Document Object Model）是HTML和XML文档的操

在Web开发中，DOM（Document Object Model）是HTML和XML文档的操作接口。通过JavaScript，我们可以动态地访问和更新文档的内容、结构和样式。掌握常见的DOM操作对于构建交互式网页至关重要。

✅ 一句话总结

DOM操作包括选择元素、修改内容与属性、处理事件、添加/删除节点等。熟练运用这些技能，可以创建高度互动且响应迅速的用户界面。

✅ 一、选择元素

🔹 使用 `document.querySelector()` 和 `document.querySelectorAll()`

querySelector()：返回匹配的第一个元素。

const firstParagraph = document.querySelector('p');

querySelectorAll()：返回所有匹配元素的NodeList。
```
const paragraphs = document.querySelectorAll('p');
```

🔹 使用 `getElementById()` 和 `getElementsByClassName()`

getElementById()：根据ID选择单个元素。

const element = document.getElementById('uniqueId');

getElementsByClassName()：返回一个HTMLCollection。

const elements = document.getElementsByClassName('className');

🔹 使用 `getElementsByTagName()`

返回指定标签名的所有元素。

const divs = document.getElementsByTagName('div');

✅ 二、修改内容与属性

🔹 修改文本内容

textContent：设置或获取节点及其后代的文本内容。
```
element.textContent = 'New Text';
```

innerHTML：设置或获取元素内的HTML代码。

element.innerHTML = '<strong>Bold Text</strong>';

🔹 修改属性

setAttribute() 和 getAttribute()：

element.setAttribute('src', 'image.jpg');
const srcValue = element.getAttribute('src');

直接属性访问：
```
element.src = 'image.jpg';
```

🔹 修改CSS类

classList 提供了便捷的方法来添加、移除或切换CSS类。

element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');

✅ 三、处理事件

🔹 添加事件监听器

addEventListener() 是最灵活的方式。

button.addEventListener('click', function() {
  console.log('Button clicked!');
});

🔹 移除事件监听器

removeEventListener() 需要提供相同的函数引用才能移除特定的事件监听器。

function handleClick() {
  console.log('Button clicked!');
}
button.removeEventListener('click', handleClick);

🔹 直接赋值事件处理器

可以直接给元素的事件属性赋值。

button.onclick = function() {
  console.log('Button clicked!');
};

✅ 四、添加与删除节点

🔹 创建新节点

createElement() 创建一个新的HTML元素。

const newDiv = document.createElement('div');

createTextNode() 创建一个新的文本节点。

const text = document.createTextNode('Hello World');

🔹 插入节点

appendChild() 将一个节点添加到另一个节点的末尾。
```
parent.appendChild(newDiv);
```
insertBefore() 在指定的子节点之前插入新的子节点。
```
parent.insertBefore(newDiv, referenceNode);
```

🔹 删除节点

removeChild() 从DOM中删除指定的子节点。
```
parent.removeChild(childNode);
```
remove() 现代方法，直接从DOM中移除调用它的元素。
```
childNode.remove();
```

✅ 五、遍历DOM树

🔹 访问父节点、子节点和兄弟节点

parentNode 获取当前节点的父节点。
childNodes 返回一个包含指定节点的子节点的实时集合。
nextSibling 和 previousSibling 分别获取下一个和上一个兄弟节点。
firstChild 和 lastChild 分别获取第一个和最后一个子节点。

const parent = element.parentNode;
const firstChild = element.firstChild;

✅ 六、一句话总结

掌握DOM操作是前端开发的基础，通过选择元素、修改内容与属性、处理事件以及管理节点，能够创建出动态且响应式的网页应用。

💡 进阶建议

学习虚拟DOM的概念，了解React等框架如何优化DOM操作；
探索MutationObserver API，用于监视DOM变化；
使用现代浏览器提供的性能工具分析DOM操作对页面加载速度的影响；
结合TypeScript使用DOM API，提高代码类型安全性和可维护性；

【js篇】常见的DOM操作