DOM树的添加删除，访问HTML的属性

在这里我还介绍一个访问html元素的方法：
通过选择器查找： document.querySelectorAll(“CSS选择器”)
返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。是一个静态的 NodeList 类型的对象。
通过与CSS选择器的结合使用，有很多作用

访问HTML的属性：

getAttribute() 方法返回指定属性名的属性值。

element.getAttribute(attributename)

setAttribute 修改属性值

element.setAttribute("属性名", "属性值");

removeAttribute 删除属性

element.removeAttribute("属性名");

hasAttribute 判断是否包含属性

element.hasAttribute("属性名");

以上都是HTML标准属性

还可以使用HTMLDOM访问

element.属性名

上面的功能都可以用这种方法实现，两者没有区别，那种适合就用那种

DOM树的添加

如果要添加一个新元素，就需要创建一个元素
创建新元素 createElement
//例子： 创建a标签

var a = document.createElement("a");

要注意的是创建元素后，它存在于内存中，只有把它添加到DOMtree上，才会在页面上显示

appendChild() 在父元素中追加子元素
可以在任何的元素上追加子元素，如果是页面上现有的元素，相当于把这个元素剪切到别的地方

parentElement.appendChild(element)

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

parentElement.insertBefore(newElem, elem);
也需要父元素来使用

replaceChild() 方法用新节点替换某个子节点。

parentElement.replaceChild(newElem, elem);
也需要父元素来使用

删除元素

removeChild() 方法删除指定元素的某个指定的子节点。

parentElement.removeChild(elem);
通过父元素删除
以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

remove() 删除指定元素

Element.remove();

要注意的一点是，频繁操作DOM树会导致的页面重绘、重新排版、浪费资源影响性能，导致用户体验不好，这时就可以用到createDocumentFragment()方法

createDocumentFragment()方法 创建一个临时保存多个子元素的虚拟父元素

var f= document.createDocumentFragment();

将对dom树的操作添加到这个虚拟父元素中，当所有的操作完成后，再将这个虚拟父元素添加到dom树上，添加完成后，这个虚拟父元素会自动从内存中释放，相当于只操作一次dom树