前端面试__谈谈你知道的DOM常见的操作（JavaScript）

目录

1. 什么是DOM

2. 有哪些操作

2.1 创建节点

2.1.1 createElement

2.1.2 createTextNode

2.1.3 createDocumentFragment

2.1.4 createAttribute

2.2 获取节点

2.2.1 querySelector

2.2.2 querySelectorAll

2.3 更新节点

2.3.1 innerHTML

2.3.2 innerText、textContent

2.4 添加节点

2.4.1 innerHTML

2.4.2 appendChild

2.4.3 insertBefore

2.4.4 setAttribute

2.5 删除节点

---

1. 什么是DOM

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

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

2. 有哪些操作

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

2.1 创建节点

2.1.1 createElement

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

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

2.1.2 createTextNode

创建一个文本节点

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

2.1.3 createDocumentFragment

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

const fragment = document.createDocumentFragment();

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

2.1.4 createAttribute

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

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

2.2 获取节点

2.2.1 querySelector

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

document.querySelector('#element')
document.querySelector('div')
document.querySelector('.element')
document.querySelector('[name="ok"]')
document.querySelector('div + ul > li')

2.2.2 querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表

const notLive = document.querySelectorAll("p");
​​​​​​​document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document.documentElement;  获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all[''];  获取页面中的所有元素节点的对象集合型

2.3 更新节点

2.3.1 innerHTML

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

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

2.3.2 innerText、textContent

与innerHTML的区别：无法识别任何HTML标签

innerText与textContent的区别：innerText不返回隐藏元素的文本，而textContent返回所有文本

2.3.3 style

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

p.style.fontSize = '20px'; 

2.4 添加节点

2.4.1 innerHTML

如果这个DOM节点是空的

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

如果不是空的

• innerHTML会替换<div></div>标签中的内容

2.4.2 appendChild

把一个子节点添加到父节点的最后一个子节点

2.4.3 insertBefore

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

parentElement.insertBefore(newElement, referenceElement)

子节点会插入到referenceElement之前

2.4.4 setAttribute

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

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

2.5 删除节点

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

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

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