常见的DOM操作

---

前言

文档对象模型（DOM）是 HTML 和 XML 文档的编程接口它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。

---

一、操作

通过js对DOM进行操作，以前用Jquery，zepto等库来操作DOM，后来Vue，Angular，React框架出现口，通过操作数据来控制DOM，很少直接对DOM进行操作。

常见的DOM操作：

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

二、创建节点

1.createElement

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

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

2.createTextNode

创建一个文本节点。

代码如下

constoo textEl = document.createTextNode("content")

3.createDocumentFragment

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

const fragment = document.creatDocumentFragment();

当请求把一个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的静态实例，是一个静态的“快照”，不是“实时”的查询。

3.其他方法

其他获取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标签
document.all['']; //获取页面中的所有元素节点的对象集合

4.其他节点

每个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不返回隐藏元素（display：none）的文本，而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

这个方法会用将要添加到内容，替换掉当前节点的全部子节点。

2.appendChild

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

<!-- 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元素添加到list的尾部

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

//现在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>

将已存在于当前文档树中的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

删除后的节点虽然已经不在文档树中，仍然在内存中，可以随时再次被添加到别的位置。