dom节点创建、添加、删除；节点属性设置获取

一、dom节点创建
1、元素节点的创建
document.createElement继承自Document构造函数的原型对象，Element.prototype没有该方法。
let divDom = document.createElement(‘div’);
2、添加子节点 appendChild
document.body.appendChild，该方法不在Document.prototype上，也不在Element.prototype，而是在Node.prototype上（Node是dom结构最顶层，这样设计可以让Document后代document.body、document.head、还有Element后代dom节点都享有该方法）。
appendChild只接受dom节点（元素、文本、注释等dom节点），如果是字符串会报错
appendChild不仅是添加dom节点，如果接受的参数是文档中已存在的节点，那么appendChild会对这个节点进行剪切复制，改变这个节点位置
3、插入子节点 insertElement
dom.insertElement(newDom, markDom)

let a = document.createElement('a');
a.innerHtml = '超链接';
let p = document.getElementsByTagName('p')[0];
document.body.insertElement(a, p)

4、移除删除节点<br />（1）移除子节点removeChild，**移除dom节点**（从dom结构中移除），**dom对象还在内存里面**。<br />先找到父节点，调用父节点方法移除dom节点<br />（2）remove方法是es5后新增的方法，**dom节点和dom对象都移除**<br />直接调用dom节点后调用该方法，可以消除dom对象，自我毁灭（suicide）<br />5、替换节点<br />dom.replace(newDom, oldDom)

二、innerHTML和innerText
innerHTML是节点内部html字符串，而innerText是节点内部文本字符串（过略了HTML标签）

三、给标签添加自定义属性 ‘data-attributeName‘
H5中，可以给标签添加自定义属性 ‘data-attributeName’。
可以直接在dom节点属性dataset中获取，dataset属性在ie9及以下不兼容，但是可以用getAttribute获取属性。

<div data-myName='domName'><div>

let divDom = document.getElementByTagName('div')[0];
console.log(divDom.dataset.myName) // => domName
console.log(divDom.getAttribute('myName'))

四、减少dom操作次数之文档碎片,且不留痕迹
document.createElementFragment，可以缓存dom节点，再插入文档后不增加多余节点

let elementFragment = document.createElementFragment();
for(let i = 0; i < 1000; i++){
    let oP = document.createElement('p')
  oP.innerText = i;
  elementFragment.appendChild(oP)
}
document.body.appendChild(elementFragment)

五、作业
1、原型上编程，hasChildren方法，判断是否含有子元素节点
2、原型上编程，寻找兄弟元素节点方法，整数往前找，负数往后找，0是自己
3、把文档所有元素节点遍历出来
4、原型上封装insertAfter方法