面试官：谈谈你知道的 DOM 常见的操作

作者：CoderBin

2022-10-26
广东
本文字数：3240 字
阅读完需：约 11 分钟

前言

面试官：“谈谈你知道的 DOM 常见的操作”

紧张的萌新：“可以获取到 dom...”

面试官：“...”

······

大家好，我是 CoderBin，又来到了面试官系列，本次总结了 JavaScript 中 DOM 的一些常用操作。DOM 原生操作对前端开发人员来说是非常重要的，有助于理解某些框架深层次的底层实现。希望对大家有所帮助，谢谢！

如果文中有不对、疑惑的地方，欢迎在评论区留言指正🌻

高频面试总结
【1】关于Vue的一些高频面试题总结
【2】75道关于CSS的高频面试题总结，请注意查收！🔥
面试官系列文章
【1】面试官系列-专栏

一、DOM

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容

任何 HTML 或XML文档都可以用 DOM 表示为一个由节点构成的层级结构

节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系，如下所示：

<html>    <head>        <title>Page</title>    </head>    <body>        <p>Hello World!</p >    </body></html>

复制代码

DOM也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：

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

复制代码

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

二、常见操作

日常前端开发，我们都离不开DOM操作

在以前，我们使用Jquery，zepto等库来操作DOM，之后在vue，Angular，React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM

但这并不代表原生操作不重要。相反，DOM操作才能有助于我们理解框架深层的内容

下面就来分析DOM常见的操作，主要分为：

创建节点
查询节点
更新节点
添加节点
删除节点

三. 创建节点

1. createElement

创建新元素，接受一个参数，即要创建元素的标签名

const divEl = document.createElement("div");

复制代码

2. createTextNode

创建一个文本节点

const textEl = document.createTextNode("content");

复制代码

3. createDocumentFragment

用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中

const fragment = document.createDocumentFragment();

复制代码

当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点

4. createAttribute

创建属性节点，可以是自定义属性

const dataAttribute = document.createAttribute('custom'); consle.log(dataAttribute);

复制代码

四. 获取节点

1. querySelector

传入任何有效的 css 选择器，即可选中单个 DOM 元素（首个）：

document.querySelector('.element')document.querySelector('#element')document.querySelector('div')document.querySelector('[name="username"]')document.querySelector('div + p > span')

复制代码

如果页面上没有指定的元素时，返回 null

2. querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表

const notLive = document.querySelectorAll("p");

复制代码

需要注意的是，该方法返回的是一个 NodeList 的静态实例，它是一个静态的“快照”，而非“实时”的查询

关于获取DOM元素的方法还有如下，就不一一述说

document.getElementById('id属性值'); // 返回拥有指定id的对象的引用document.getElementsByClassName('class属性值'); // 返回拥有指定class的对象集合document.getElementsByTagName('标签名'); // 返回拥有指定标签名的对象集合document.getElementsByName('name属性值');  // 返回拥有指定名称的对象结合document/element.querySelector('CSS选择器');  // 仅返回第一个匹配的元素document/element.querySelectorAll('CSS选择器');  // 返回所有匹配的元素document.documentElement;  // 获取页面中的HTML标签document.body;  // 获取页面中的BODY标签

复制代码

除此之外，每个DOM元素还有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling属性，关系图如下图所示

五. 更新节点

1. innerHTML

不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

// 获取<p id="p">...</p >var p = document.getElementById('p');// 设置文本为abc:p.innerHTML = 'ABC'; // <p id="p">ABC</p >// 设置HTML:p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';// <p>...</p >的内部结构已修改

复制代码

2. innerText、textContent

自动对字符串进行HTML编码，保证无法设置任何HTML标签

// 获取<p id="p-id">...</p >var p = document.getElementById('p-id');// 设置文本:p.innerText = '<script>alert("Hi")</script>';// HTML被自动编码，无法设置一个<script>节点:// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p >

复制代码

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本

3. style

DOM节点的style属性对应所有的CSS，可以直接获取或设置。遇到-需要转化为驼峰命名

// 获取<p id="p-id">...</p >const p = document.getElementById('p-id');// 设置CSS:p.style.color = '#ff0000';p.style.fontSize = '20px'; // 驼峰命名p.style.paddingTop = '2em';

复制代码

六. 添加节点

1. innerHTML

如果这个 DOM 节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于添加了新的DOM节点

如果这个 DOM 节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点

2. appendChild

把一个子节点添加到父节点的最后一个子节点。举个例子：

原dom结构

<!-- HTML结构 --><p id="js">JavaScript</p ><div id="list">    <p id="java">Java</p >    <p id="python">Python</p >    <p id="scheme">Scheme</p ></div>

复制代码

添加一个p元素

const js = document.getElementById('js')js.innerHTML = "JavaScript"const list = document.getElementById('list');list.appendChild(js);

复制代码

现在HTML结构变成了下面

<!-- HTML结构 --><div id="list">    <p id="java">Java</p >    <p id="python">Python</p >    <p id="scheme">Scheme</p >    <p id="js">JavaScript</p >  <!-- 添加元素 --></div>

复制代码

上述代码中，我们是获取DOM元素后再进行添加操作，这个js节点是已经存在当前文档树中，因此这个节点首先会从原先的位置删除，再插入到新的位置

如果动态添加新的节点，则先创建一个新的节点，然后插入到指定的位置

const list = document.getElementById('list');const haskell = document.createElement('p');haskell.id = 'haskell';haskell.innerText = 'Haskell';list.appendChild(haskell);

复制代码

3. insertBefore

把子节点插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

复制代码

子节点会插入到referenceElement之前

4. setAttribute

在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值

const div = document.getElementById('id')div.setAttribute('class', 'white') //第一个参数属性名，第二个参数属性值。

复制代码

七. 删除节点

删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

// 拿到待删除节点:const self = document.getElementById('to-be-removed');// 拿到父节点:const parent = self.parentElement;// 删除:const removed = parent.removeChild(self);removed === self; // true

复制代码

删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置

每文一句：树不修，长不直；人不学，没知识。

本次的分享就到这里，如果本章内容对你有所帮助的话欢迎点赞+收藏。文章有不对的地方欢迎指出，有任何疑问都可以在评论区留言。希望大家都能够有所收获，大家一起探讨、进步！

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/4792f92e46d3f4a0a7f79ee8c】。文章转载请联系作者。

CoderBin

关注

不念过往，不惧将来 2020-10-14 加入

普通人只考虑他们将如何度过时间，而有智慧的人则试图利用时间 — CoderBin

发布

暂无评论

创作场景

面试官：谈谈你知道的 DOM 常见的操作

前言

一、DOM

二、常见操作

三. 创建节点

1. createElement

2. createTextNode

3. createDocumentFragment

4. createAttribute

四. 获取节点

1. querySelector

2. querySelectorAll

五. 更新节点

1. innerHTML

2. innerText、textContent

3. style

六. 添加节点

1. innerHTML

2. appendChild

3. insertBefore

4. setAttribute

七. 删除节点

CoderBin

评论