JavaScript DOM 操作面试考点全解析

2026-03-18 22:45:02 4504阅读

在前端开发的面试中，JavaScript 的 DOM（Document Object Model）操作是一个核心考点。DOM 操作是指通过 JavaScript 来访问和修改 HTML 文档的内容、结构和样式，它是前端交互的基础，掌握好 DOM 操作对于开发者来说至关重要。下面我们就来详细解析一下 JavaScript DOM 操作的常见面试考点。

一、DOM 基本概念

1. 什么是 DOM

DOM 是一种用于表示 HTML 或 XML 文档的树形结构，它将文档中的每个元素、属性和文本都看作是一个对象。通过 DOM，我们可以使用 JavaScript 来访问和操作这些对象，从而实现动态的网页效果。例如，一个简单的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
    <title>DOM 示例</title>
</head>
<body>
    <h1>Hello, DOM!</h1>
</body>
</html>

在这个文档中，<html>、<head>、<title>、<body> 和 <h1> 等元素都是 DOM 树中的节点。

2. DOM 节点类型

常见的 DOM 节点类型有元素节点、文本节点、属性节点等。元素节点是 HTML 标签，如 <div>、<p> 等；文本节点是元素中的文本内容；属性节点是元素的属性，如 id、class 等。我们可以通过 nodeType 属性来判断节点的类型，例如：

const element = document.getElementById('myElement');
console.log(element.nodeType); // 元素节点的 nodeType 为 1

二、DOM 选择器

1. 传统选择器

getElementById：通过元素的 id 属性来获取单个元素。
```
const element = document.getElementById('myId');
```
getElementsByClassName：通过元素的 class 属性来获取元素集合。
```
const elements = document.getElementsByClassName('myClass');
```
getElementsByTagName：通过元素的标签名来获取元素集合。
```
const paragraphs = document.getElementsByTagName('p');
```

2. 现代选择器

querySelector：返回匹配指定 CSS 选择器的第一个元素。
```
const firstElement = document.querySelector('.myClass');
```
querySelectorAll：返回匹配指定 CSS 选择器的所有元素集合。
```
const allElements = document.querySelectorAll('.myClass');
```

三、DOM 节点操作

1. 创建节点

createElement：创建一个新的元素节点。

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

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

const textNode = document.createTextNode('Hello, DOM!');

2. 添加节点

appendChild：将一个节点添加到另一个节点的子节点列表的末尾。
```
const parent = document.getElementById('parent');
parent.appendChild(newElement);
```

insertBefore：将一个节点插入到另一个节点的前面。

const referenceNode = document.getElementById('reference');
parent.insertBefore(newElement, referenceNode);

3. 删除节点

removeChild：从父节点中删除一个子节点。
```
parent.removeChild(newElement);
```

4. 替换节点

replaceChild：用一个新节点替换父节点中的一个子节点。

const newNode = document.createElement('span');
parent.replaceChild(newNode, newElement);

四、DOM 属性操作

1. 获取和设置属性

getAttribute：获取元素的属性值。

const element = document.getElementById('myElement');
const value = element.getAttribute('data-value');

setAttribute：设置元素的属性值。

element.setAttribute('data-value', 'new value');

2. 类名操作

classList：用于操作元素的类名。

element.classList.add('new-class'); // 添加类名
element.classList.remove('old-class'); // 删除类名
element.classList.toggle('active'); // 切换类名

五、事件处理

1. 事件绑定

addEventListener：为元素添加事件监听器。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button clicked!');
});

2. 事件冒泡和捕获

事件冒泡是指事件从最内层的元素开始，逐层向外传播；事件捕获则是从最外层的元素开始，逐层向内传播。可以通过 addEventListener 的第三个参数来指定事件的传播方式，默认值为 false，表示事件冒泡。

// 事件捕获
button.addEventListener('click', function() {
    console.log('Event captured!');
}, true);

3. 事件委托

事件委托是指将事件监听器绑定到父元素上，利用事件冒泡的原理，当子元素触发事件时，事件会冒泡到父元素上，从而实现对多个子元素的事件处理。

const parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('List item clicked!');
    }
});

六、性能优化

1. 批量操作

在进行 DOM 操作时，尽量减少对 DOM 的直接操作，因为每次操作都会引起浏览器的重排和重绘，影响性能。可以先将需要操作的节点添加到一个文档片段（DocumentFragment）中，然后一次性将文档片段添加到 DOM 中。

const fragment = document.createDocumentFragment();
const items = ['item1', 'item2', 'item3'];
items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li);
});
const ul = document.getElementById('myList');
ul.appendChild(fragment);

2. 节流和防抖

在处理一些高频事件（如滚动、窗口大小改变等）时，可以使用节流和防抖技术来减少事件的触发次数，提高性能。

节流：在一定时间内，只执行一次函数。

function throttle(func, delay) {
let timer = null;
return function() {
    if (!timer) {
        func.apply(this, arguments);
        timer = setTimeout(() => {
            timer = null;
        }, delay);
    }
};
}

防抖：在一定时间内，只有最后一次触发事件才会执行函数。

function debounce(func, delay) {
let timer = null;
return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        func.apply(this, arguments);
    }, delay);
};
}