DOM操作节点

一、创建节点：

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

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

2.createTextNode创建一个文本节点

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

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

const fragment = document.createDocumentFragment();

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

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

---

二、查询获取节点：

1.querySelector
2.querySelectorAll
3.getElementById
4.getElementsByClassName
5.getElementsByTagName
6.getElementsByName
7.document.documentElement;  获取页面中的HTML标签
8.document.body; 获取页面中的BODY标签

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

---

三、更新节点：

1.innerHTML 可以输出标签间的全部内容,包括里面的HTML标签和文本信息
2.innerText  可以输出标签间的纯文本信息,会将标签过滤掉
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 把一个子节点添加到父节点的最后一个子节点
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