DOM
即Document Object Modal。
DOM操作中的property和attribute
property：修改对象属性，不会体现在html结构中，例如修改dom的css样式。
arrtibute：修改html属性，会改变html结构，比如我给我的p标签加上一个叫data-name的属性，属性的值为p1。
<p data-name='p1'>
二者都有可能引起DOM重新渲染，如果你是要必须修改DOM的结构的话，那就得用arrtibute，平常在使用中尽量使用property，property可能在一些js的机制中，去重复避免一些dom的渲染，但arribute一定会引发DOM渲染。
DOM操作
以下方法没有相关代码，请读者自行脑补....
常用获取节点：
根据id: document.getElementById('div1')
根据class：document.getElementsByClassName('div1')
还有一些获取节点的方法就不一一列举了...
①新建节点：document.createElement('p')
②插入节点：div1.appendChild(newP)
③移动节点：div1.appendChild(newP)，前提是要有这个newP节点，也就是对于现有的节点进行appendChild的话，他会移动节点，之前的newP的节点的位置消失，而不是直接插入
④获取父元素：p1.parentNode
⑤获取子元素列表：div1.childNodes，但这个获取的所有子元素（包括文本元素，比如你一个div中有三个p，每个p中还各自有一段话，那么childNodes会把三个p加三个text一起算上）
那如果我就想获取里面的全部p标签，怎么弄呢？
const div1ChildNodesP = Array,prototype.slice.call(div1.childNodes).filter(child => {
if(child.nodeType === 1) {
return true;
}
return false;
});
console.log(div1ChildNodesP);
// filter方法会创建一个新数组，原数组的每个元素传入回调，判断回调的return返回值，为true保存到新数组中，为false则不保存，原数组不变
⑥删除节点：div1.removeChild(div1.childNodes[0])
DOM性能优化（重要）
DOM操作非常昂贵，避免频繁的DOM操作
①对DOM查询做缓存
// 不缓存 DOM 查询结果
for(let = 0; i < document.getElementsByTagName('p').length; i++) {
// 每次循环，都会计算 length，频繁进行 DOM 查询
}
// 缓存 DOM 查询结果
const pList = document.getElementsByTagName('p');
const lenght = pList.length;
for(let i = 0; i < length; i++ ) {
// 缓存 length，只进行一次 DOM 查询
}
②将频繁操作改为一次操作
普通循环操作：
const list = document.geElementById('list');
for(let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.innerHTML = `List item ${i}`;
list.appendChild(li);
}
这样写有没有问题？没有，写的非常好，每次循环，创建一个li标签，我们就插入到list中，逻辑上没有问题。但是每次循环都要插一遍，就很费资源了。所以我们的宗旨是要把这些li都一起创建好，最终一起插入。
const list = document.geElementById('list');
// 创建一个文档片段，此时还有插入到 DOM 树中
const frag = document.createDocumentFragment();
for(let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.innerHTML = `List item ${i}`;
frag.appendChild(li);
}
// 都完成之后，再插入到 DOM 树中
listNode.appendChild(frag);
