DOM基础

JavaScript由三个部分组成：ECMAscript + DOM +BOM，DOM就是其中之一，全称为document object model（文件对象模型）

主要就是对文件对象进行控制，讲到控制就从最基础的开始——增删查插改

本文是对dom的基础api进行总结概括

查

动态（实时）：

document.getElementById();

返回值为类数组：

document.getElementsByTagName();

document.getElementsByClassName();

document.getElementsByName(); //只对部分标签name起作用（表单form，表单元素，img，iframe）

CSS选择器（非实时，静态）： —— 取完后就算做别的操作也不改变

querySelector();

querySelectorAll();

增

document.createElement(); —> 新建元素

document.createTextNode(); —>新建文本节点

document.createComment(); —>新建注释节点

document.createAttribute(); —> 新建属性节点（很少用）—>用Node.setAttribute()替代

documenr.createDocumentFragment() —>新建文件碎片节点（容易忽略）

—>documenr.createDocumentFragment()方法，则是用了创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。DocumentFragment节点不属于文档树，继承的parentNode属性总是null。

它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

插

parentNode.appendChild(); —>在该parentNode下插入 —>插入页面的方法为document.body.appendChild();

parentNode.insertBefore(a,b); —>将a节点插入在b之前

删

parentNode.removeChild(); —>从父节点删除子节点（他杀）

childNode.remove();（常用）—>子节点自己删除自己（自杀）

改

parentNode.replaceChild(new, origin); —>用new的改换origin原先的

节点类型NodeType（常见）

元素节点 —— 1 属性节点 —— 2 文本节点 —— 3

注释节点 —— 8 document —— 9