【js面试题】深入理解DOM操作：创建、查询、更新、添加和删除节点

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

引言：
在前端开发中，DOM（文档对象模型）操作是日常工作中不可或缺的一部分。DOM提供了一种以编程方式访问和更新文档内容、结构和样式的接口。
任何html或 xml 文档都可以用dom表示为一个由节点构成的层级结构

<div>
 <p title="title">
 content
 </p >
</div>

上述结构中 div、p就是元素的节点 content就是文本的节点，title就是属性节点

本文将详细介绍DOM操作的五个基本方面：创建节点、查询节点、更新节点、添加节点和删除节点，并提供相应的代码示例。

一、创建节点

来源： DOM API允许开发者动态地创建新的HTML元素，并将其添加到文档中。
应用场景： 动态生成内容，如表单验证消息、动态加载的列表项等。
创建节点是DOM操作中非常基础且常用的操作之一。在JavaScript中，我们可以通过document.createElement方法来创建一个新的元素节点。下面是一些创建节点的详细例子，包括创建不同类型的节点和设置它们的属性。

创建元素节点

javascript">// 创建一个新的div元素
let newDiv = document.createElement('div');

// 创建一个新的段落元素
let newParagraph = document.createElement('p');

// 创建一个新的列表项元素
let newListItem = document.createElement('li');

创建文本节点

javascript">// 创建一个文本节点
let textNode = document.createTextNode('这是一个文本节点');

创建注释节点

javascript">// 创建一个注释节点
let commentNode = document.createComment('这是一个注释');

创建属性节点

javascript">// 创建一个属性节点
let classAttribute = document.createAttribute('class');
classAttribute.value = 'my-class';

创建文档片段节点

文档片段节点是DOM操作中一个非常有用的工具，它允许开发者以一种高效的方式处理DOM元素

javascript">// 创建一个文档片段节点
let docFragment = document.createDocumentFragment();

扩展

创建多个元素节点并设置属性

javascript">// 创建多个元素节点并设置属性
let list = document.createElement('ul');
for (let i = 1; i <= 5; i++) {
  let listItem = document.createElement('li');
  listItem.textContent = '列表项 ' + i;
  list.appendChild(listItem);
}

创建节点并添加到文档中

javascript">// 创建一个div元素并添加到body中
let newDiv = document.createElement('div');
document.body.appendChild(newDiv);

创建节点是构建动态网页和应用的基础，通过这些节点，我们可以构建出复杂的用户界面和交互逻辑。

二、查询节点

来源： DOM提供了多种方法来查询文档中的节点，如getElementById、getElementsByTagName、querySelector等。
应用场景： 获取页面元素以进行进一步操作，如事件绑定、样式修改等。

`querySelector`

querySelector 方法返回文档中匹配指定CSS选择器的第一个元素。如果没有找到匹配的元素，则返回 null。

用法：

javascript">element = document.querySelector(selectors);

参数：

selectors：一个字符串，包含一个或多个CSS选择器，用于指定要返回的元素。

代码用例：

javascript">// 获取页面中第一个id为"myElement"的元素
var element = document.querySelector('#myElement');
console.log(element); // 输出匹配的元素

// 获取页面中第一个类名为"myClass"的元素
var element = document.querySelector('.myClass');
console.log(element); // 输出匹配的元素

// 获取页面中第一个具有特定类名和id的元素
var element = document.querySelector('.myClass#myElement');
console.log(element); // 输出匹配的元素

`querySelectorAll`

querySelectorAll 方法返回文档中匹配指定CSS选择器的所有元素的静态（不实时更新） NodeList 集合。

用法：

javascript">elements = document.querySelectorAll(selectors);

参数：

selectors：一个字符串，包含一个或多个CSS选择器，用于指定要返回的元素集合。

代码用例：

javascript">// 获取页面中所有类名为"myClass"的元素
var elements = document.querySelectorAll('.myClass');
console.log(elements); // 输出匹配的元素集合

// 获取页面中所有具有特定类名和id的元素
var elements = document.querySelectorAll('.myClass#myElement');
console.log(elements); // 输出匹配的元素集合

// 遍历所有匹配的元素
elements.forEach(function(element) {
    console.log(element); // 输出每个匹配的元素
});

querySelector 和 querySelectorAll 是非常强大的工具，它们允许开发者使用CSS选择器来查询DOM元素。querySelector 返回第一个匹配的元素，而 querySelectorAll 返回所有匹配的元素。

三、更新节点

来源： DOM允许开发者修改已存在的节点内容或属性。
应用场景： 更新页面上的动态内容，如实时显示时间、更新用户状态等。
在JavaScript中，更新DOM节点的内容和样式是常见的操作。innerHTML、innerText、textContent和style属性是用于更新节点内容和样式的常用方法。下面将分别介绍这些属性的概念和代码用例。

innerHTML

innerHTML属性用于获取或设置指定元素的HTML内容。它返回元素内部的HTML标记，如果设置，则会替换元素内的所有内容。

代码用例：

javascript">// 获取元素的HTML内容
var content = document.getElementById('myElement').innerHTML;
console.log(content); // 输出元素的HTML内容

// 设置元素的HTML内容
document.getElementById('myElement').innerHTML = '<p>新的内容</p>';

innerText

innerText属性用于获取或设置指定元素及其子元素的文本内容。它返回元素内的纯文本，忽略所有HTML标签，如果设置，则会替换元素内的所有文本内容。

代码用例：

javascript">// 获取元素的文本内容
var text = document.getElementById('myElement').innerText;
console.log(text); // 输出元素的文本内容

// 设置元素的文本内容
document.getElementById('myElement').innerText = '新的文本内容';

textContent

textContent属性用于获取或设置指定元素及其子元素的文本内容。与innerText类似，它返回元素内的纯文本，但不会忽略脚本和样式元素。如果设置，则会替换元素内的所有文本内容。

代码用例：

javascript">// 获取元素的文本内容
var text = document.getElementById('myElement').textContent;
console.log(text); // 输出元素的文本内容

// 设置元素的文本内容
document.getElementById('myElement').textContent = '新的文本内容';

style

style属性用于获取或设置指定元素的样式。通过这个属性，可以访问和修改元素的内联样式。

代码用例：

javascript">// 获取元素的样式属性
var style = document.getElementById('myElement').style;
console.log(style.color); // 输出元素的文本颜色

// 设置元素的样式属性
document.getElementById('myElement').style.color = 'red';
document.getElementById('myElement').style.fontSize = '20px';

结论

innerHTML、innerText、textContent和style属性是更新DOM节点内容和样式的强大工具。innerHTML和innerText用于获取和设置元素的文本内容，但它们处理HTML的方式不同。textContent提供了一种获取和设置纯文本内容的方法，而style属性允许开发者直接修改元素的样式。

四、添加节点

来源： DOM提供了方法来将新创建或查询到的节点添加到文档的特定位置。
应用场景： 在页面中动态插入新内容，如评论、广告等。
在JavaScript中，向DOM中添加节点是通过一系列方法实现的。innerHTML、insertBefore、setAttribute和appendChild是其中一些常用的方法。下面将分别介绍这些方法的概念和代码用例。

innerHTML

innerHTML属性用于获取或设置指定元素的HTML内容。虽然它主要用于获取和设置内容，但也可以用来添加新内容，因为它会替换掉元素内的所有内容。

insertBefore

insertBefore方法用于在指定的父节点的子节点列表中的某个节点之前插入一个新的节点。它需要两个参数：要插入的新节点和参照节点。

代码用例：

javascript">// 获取父节点和要插入的新节点
var parent = document.getElementById('parentElement');
var newNode = document.createElement('p');
newNode.textContent = '这是新添加的段落。';

// 获取参照节点
var referenceNode = document.getElementById('referenceElement');

// 在参照节点之前插入新节点
parent.insertBefore(newNode, referenceNode);

setAttribute

setAttribute方法用于设置指定元素的属性值。它需要两个参数：要设置的属性名和属性值。

代码用例：

javascript">// 获取元素
var element = document.getElementById('myElement');

// 设置元素的class属性
element.setAttribute('class', 'new-class');

appendChild

appendChild方法用于将一个节点添加到指定父节点的子节点列表的末尾。它只接受一个参数：要添加的新节点。

代码用例：

javascript">// 获取父节点和要添加的新节点
var parent = document.getElementById('parentElement');
var newNode = document.createElement('p');
newNode.textContent = '这是新添加的段落。';

// 将新节点添加到父节点的子节点列表末尾
parent.appendChild(newNode);

结论

innerHTML、insertBefore、setAttribute和appendChild是向DOM中添加节点的常用方法。innerHTML可以用来添加新内容，但会替换掉元素内的所有内容。insertBefore允许在特定位置插入新节点。setAttribute用于设置元素的属性值。appendChild则将新节点添加到父节点的子节点列表末尾。

五、删除节点

来源： DOM提供了方法来从文档中移除节点。
应用场景： 清除不再需要的内容，如删除表单中的错误消息、移除已处理的列表项等。
代码示例：

javascript">// 删除指定的节点
parentElement.removeChild(newDiv);

结语：

掌握DOM操作是前端开发的基础技能之一。通过创建、查询、更新、添加和删除节点，我们可以灵活地控制页面内容和结构。在实际开发中，合理运用这些操作可以极大地提升用户体验和页面的交互性。希望本文的介绍和示例能够帮助你更好地理解和运用DOM操作。