2024年最全【面试题】面试官：谈谈你知道的DOM常见的操作(2)，阿里交叉面

2401_84617431

于 2024-05-14 14:42:05 发布

阅读量711

点赞数 11

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84617431/article/details/138854709

版权

程序员专栏收录该内容

105 篇文章 0 订阅

订阅专栏

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

面试官：“…”

······

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

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

一、DOM

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

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

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

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

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

<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';

六. 添加节点