面试题：常见的 DOM 操作有哪些？

DOM (Document Object Model) 操作是前端开发的核心技能之一。常见的 DOM 操作可以分为以下几大类：

---

1. 查找/获取元素 (Selecting/Getting Elements)

这是所有操作的前提。

• document.getElementById('id'):
  • 通过 id 属性获取单个元素。返回 Element 对象或 null。

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

• document.querySelector('selector'):
  • 使用 CSS 选择器获取第一个匹配的元素。返回 Element 对象或 null。

const firstItem = document.querySelector('.list-item');
  const submitButton = document.querySelector('button[type="submit"]');

• document.querySelectorAll('selector'):
  • 使用 CSS 选择器获取所有匹配的元素。返回一个 NodeList（类数组对象）。

const allItems = document.querySelectorAll('.list-item');
  allItems.forEach(item => { /* 处理每个元素 */ });

• 其他获取方法:
  • document.getElementsByClassName('class'): 通过类名获取，返回 HTMLCollection。
  • document.getElementsByTagName('tag'): 通过标签名获取，返回 HTMLCollection。
  • document.getElementsByName('name'): 通过 name 属性获取，返回 NodeList。

---

2. 创建元素 (Creating Elements)

• document.createElement('tag'):
  • 创建一个指定标签名的新元素节点。

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

• document.createTextNode('text'):
  • 创建一个文本节点。

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

• element.cloneNode(deep):
  • 克隆一个元素。deep 为 true 时深拷贝（包含子元素），false 时浅拷贝。

const clone = originalElement.cloneNode(true);

---

3. 添加/插入元素 (Appending/Inserting Elements)

• parent.appendChild(child):
  • 将一个节点添加到父元素的子节点列表末尾。

parent.appendChild(newDiv);

• parent.insertBefore(newNode, referenceNode):
  • 将 newNode 插入到 parent 的 referenceNode 之前。

parent.insertBefore(newDiv, existingChild);

• element.append(...nodesOrStrings) (现代方法):
  • 向元素内部末尾添加一个或多个节点或字符串。

parent.append(newDiv, 'some text');

• element.prepend(...nodesOrStrings) (现代方法):
  • 向元素内部开头添加一个或多个节点或字符串。

parent.prepend(newDiv);

---

4. 修改元素 (Modifying Elements)

• 修改内容:
  • element.innerHTML = 'html': 设置或获取元素的 HTML 内容（注意 XSS 风险）。
  • element.textContent = 'text': 设置或获取元素的纯文本内容（更安全）。
  • element.innerText: 类似 textContent，但受 CSS 样式影响（如隐藏元素不显示）。
• 修改属性:
  • element.setAttribute('name', 'value'): 设置属性。
  • element.getAttribute('name'): 获取属性值。
  • element.removeAttribute('name'): 移除属性。
• 直接访问属性：element.id, element.src, element.href 等。
• 修改样式:
  • element.style.property = 'value': 直接设置行内样式（使用驼峰命名，如 backgroundColor）。 element.style.color = 'red'; element.style.marginTop = '10px';
  • element.classList: 操作类名（推荐用于 CSS 样式）。
    • element.classList.add('class')
    • element.classList.remove('class')
    • element.classList.toggle('class')
    • element.classList.contains('class')
• 修改其他:
  • element.id = 'newId'
  • element.className = 'newClass' 或 element.className += ' anotherClass'

---

5. 删除元素 (Removing Elements)

• parent.removeChild(child):
  • 从父元素中移除一个子元素。

const removed = parent.removeChild(childElement);

• element.remove() (现代方法):
  • 直接将元素从其父元素中移除。

childElement.remove(); // 更简洁

---

6. 遍历 DOM (Traversing the DOM)

• 父子关系:
  • element.parentNode: 获取父节点。
  • element.childNodes: 获取所有子节点（包括文本、注释节点）。
  • element.children: 获取所有元素子节点（HTMLCollection）。
  • element.firstChild / element.lastChild
  • element.firstElementChild / element.lastElementChild
• 兄弟关系:
  • element.previousSibling / element.nextSibling
  • element.previousElementSibling / element.nextElementSibling

---

7. 事件处理 (Event Handling)

• element.addEventListener('event', handler):
  • 为元素添加事件监听器（推荐方式）。

button.addEventListener('click', handleClick);

• element.removeEventListener('event', handler):
  • 移除事件监听器。
• 直接赋值 (不推荐):
  • element.onclick = function() {} (只能绑定一个处理函数)

---

8. 其他常见操作

• 获取元素信息:
  • element.getBoundingClientRect(): 获取元素的大小和位置。
  • window.getComputedStyle(element): 获取元素应用的所有 CSS 样式。
• 焦点操作:
  • element.focus(): 让元素获得焦点。
  • element.blur(): 让元素失去焦点。

---

总结

掌握这些基本的 DOM 操作方法是前端开发的基础。现代开发中，虽然框架（如 React, Vue）减少了直接的 DOM 操作，但理解其原理对于调试、性能优化和编写原生 JS 代码至关重要。推荐优先使用 querySelector/querySelectorAll 和 classList 等现代 API。