前端开发中常见的DOM操作汇总

DOM（Document Object Model）操作是前端开发中的核心技能之一，它允许开发者通过 JavaScript 动态地访问和操作 HTML 文档的内容、结构和样式。以下是常见的 DOM 操作：

1. 选择元素

• document.getElementById(id): 通过元素的 ID 获取元素。
• document.getElementsByClassName(className): 通过类名获取元素集合（返回 HTMLCollection）。
• document.getElementsByTagName(tagName): 通过标签名获取元素集合（返回 HTMLCollection）。
• document.querySelector(selector): 通过 CSS 选择器获取第一个匹配的元素。
• document.querySelectorAll(selector): 通过 CSS 选择器获取所有匹配的元素（返回 NodeList）。

const elementById = document.getElementById('myId');
const elementsByClass = document.getElementsByClassName('myClass');
const elementsByTag = document.getElementsByTagName('div');
const firstElement = document.querySelector('.myClass');
const allElements = document.querySelectorAll('.myClass');

2. 修改元素内容

• element.innerHTML: 获取或设置元素的 HTML 内容。
• element.textContent: 获取或设置元素的文本内容（不包括 HTML 标签）。
• element.innerText: 获取或设置元素的可见文本内容（考虑样式和布局）。

element.innerHTML = '<strong>New Content</strong>';
element.textContent = 'New Text Content';

3. 修改元素属性

• element.getAttribute(attrName): 获取元素的属性值。
• element.setAttribute(attrName, value): 设置元素的属性值。
• element.removeAttribute(attrName): 移除元素的属性。
• element.hasAttribute(attrName): 检查元素是否具有某个属性。

const value = element.getAttribute('data-custom');
element.setAttribute('data-custom', 'newValue');
element.removeAttribute('data-custom');

4. 修改元素样式

• element.style.property: 直接修改元素的样式属性。
• element.classList.add(className): 添加类名。
• element.classList.remove(className): 移除类名。
• element.classList.toggle(className): 切换类名（存在则移除，不存在则添加）。
• element.classList.contains(className): 检查是否包含某个类名。

element.style.color = 'red';
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('highlight');

5. 创建和插入元素

• document.createElement(tagName): 创建一个新的元素节点。
• element.appendChild(newElement): 将新元素插入到父元素的子元素列表末尾。
• element.insertBefore(newElement, referenceElement): 将新元素插入到参考元素之前。
• element.replaceChild(newElement, oldElement): 用新元素替换旧元素。

const newElement = document.createElement('div');
newElement.textContent = 'New Element';
document.body.appendChild(newElement);

6. 删除元素

• element.remove(): 直接从 DOM 中移除元素。
• element.parentNode.removeChild(element): 通过父节点移除子元素。

element.remove();
element.parentNode.removeChild(element);

7. 事件处理

• element.addEventListener(event, handler): 为元素添加事件监听器。
• element.removeEventListener(event, handler): 移除事件监听器。
• element.dispatchEvent(event): 触发事件。

element.addEventListener('click', () => {
    console.log('Element clicked');
});

8. 遍历 DOM

• element.parentNode: 获取父节点。
• element.childNodes: 获取子节点列表（包括文本节点）。
• element.children: 获取子元素列表（不包括文本节点）。
• element.firstChild: 获取第一个子节点。
• element.lastChild: 获取最后一个子节点。
• element.nextSibling: 获取下一个兄弟节点。
• element.previousSibling: 获取上一个兄弟节点。

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

9. 操作表单元素

• element.value: 获取或设置表单元素的值。
• element.checked: 获取或设置复选框或单选按钮的选中状态。
• element.selectedIndex: 获取或设置下拉列表的选中项索引。

const inputValue = document.querySelector('input').value;
const isChecked = document.querySelector('input[type="checkbox"]').checked;

10. 操作类名

• element.className: 获取或设置元素的类名（字符串形式）。
• element.classList: 获取元素的类名列表（DOMTokenList 对象）。

element.className = 'newClass';
element.classList.add('anotherClass');

11. 操作数据属性

• element.dataset: 获取或设置元素的自定义数据属性（data-*）。

const customData = element.dataset.customAttribute;
element.dataset.customAttribute = 'newValue';

12. 操作样式表

• document.styleSheets: 获取文档中的所有样式表。
• element.style: 直接操作元素的样式属性。

const stylesheets = document.styleSheets;
element.style.backgroundColor = 'blue';

13. 操作文档片段

• document.createDocumentFragment(): 创建一个文档片段，用于批量操作 DOM 元素。

const fragment = document.createDocumentFragment();
const newElement = document.createElement('div');
fragment.appendChild(newElement);
document.body.appendChild(fragment);

14. 操作文本节点

• document.createTextNode(text): 创建一个文本节点。
• element.appendChild(textNode): 将文本节点插入到元素中。

const textNode = document.createTextNode('Hello World');
element.appendChild(textNode);

15. 操作注释节点

• document.createComment(comment): 创建一个注释节点。

const commentNode = document.createComment('This is a comment');
element.appendChild(commentNode);

16. 操作文档标题

• document.title: 获取或设置文档的标题。

document.title = 'New Page Title';

17. 操作文档 URL

• document.URL: 获取文档的完整 URL。
• document.location: 获取或设置文档的 URL。

const currentURL = document.URL;
document.location.href = 'https://example.com';

18. 操作文档元信息

• document.head: 获取文档的 <head> 元素。
• document.body: 获取文档的 <body> 元素。

const headElement = document.head;
const bodyElement = document.body;

19. 操作文档加载状态

• document.readyState: 获取文档的加载状态（loading, interactive, complete）。
• document.addEventListener('DOMContentLoaded', handler): 监听 DOM 加载完成事件。

if (document.readyState === 'complete') {
    console.log('Document is fully loaded');
}

20. 操作文档视口

• window.innerWidth: 获取视口的宽度。
• window.innerHeight: 获取视口的高度。
• window.scrollX: 获取水平滚动距离。
• window.scrollY: 获取垂直滚动距离。

const viewportWidth = window.innerWidth;
const scrollY = window.scrollY;

21. 操作文档滚动

• element.scrollIntoView(): 将元素滚动到视口中。
• window.scrollTo(x, y): 将文档滚动到指定位置。

element.scrollIntoView({ behavior: 'smooth' });
window.scrollTo(0, 100);

22. 操作文档焦点

• element.focus(): 将焦点设置到元素上。
• **`element.blur