js DOM操作

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);