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

#### 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`属性，关系图如下图所示


![](https://img-blog.csdnimg.cn/img_convert/399d8a13f4babcc0b3098dedc188bfc4.webp?x-oss-process=image/format,png)


### 五. 更新节点


#### 1. innerHTML


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

// 获取

…

var p = document.getElementById(‘p’);
// 设置文本为abc:
p.innerHTML = ‘ABC’; //

ABC

// 设置HTML:
p.innerHTML = ‘ABC RED XYZ’;
//

…

的内部结构已修改

#### 2. innerText、textContent


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

// 获取

…

var p = document.getElementById(‘p-id’);
// 设置文本:
p.innerText = ‘’;
// HTML被自动编码，无法设置一个

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


#### 3. style


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

// 获取

…

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`结构

JavaScript

Java

Python

Scheme

```

添加一个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

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

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

以 Vue 为例，我整理了如下的面试题。