DOM基础 绝对干货！！！

一、什么是Dom？

Dom（Document Object Model）文档对象模型。

Dom定义了表示和修改文档所需的方法。
Dom对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象集合。也有人称DOM是对HTML以及XML的标准编程接口。Dom就是一套方法集合的总称。

个人理解的Dom原理其实和css是类似的，都需要选定一个元素然后对它进行一系列操作。所以如何选定和各种操作方法就很重要了。

二、Dom的选择器：

Dom选择器是用来选定html中的元素的，这样方便后面的一系列操作。
1、通过ID来选定
var demo=document.getElementById(“box”);

2、通过标签名来选定
var demo=document.getElementsByTagName(“div”);

3、通过类名来选定
var demo=document.getElementsByClassName(“nav”);
这个方法不是所用浏览器都兼容

4、通过name来选定
var demo=document.getElementByName(“info”);
这个方法不常用 适用于img iframe 表单 form等

5、query选择器
document.querySelsctor()括号内的写法类似于css这里选中的是div标签下面的p标签。
var p=document.querySelector(“div > p”);

6、query选择器
var par=document.querySelectorAll(“div>p”);
这是选择组的，div下面的所有的p标签。

三、节点：

什么是节点？
在JavaScript的Dom中，节点就是Dom对象里所能操作的最小单位。

1、节点类型：
元素节点————1
属性节点————2
文本节点————3
注释节点————8
document————9
DocumentFragment————11

2、判断节点个数：
div里有几个节点？
这就引申到一个遍历节点数的问题？
这个问题留到后面解决。

 <div class="box">
    123
	<!-- this is a box -->
	456
	<span>这是一个span标签节点</span>
	789
	<p>这是一个P标签节点</p>
	222
</div>

1）如何遍历节点？

1、遍历节点（这里包括所有节点）

parentNode 查看父节点 最顶端的parentNode是#document；
childNodes 查看子节点们；
firstChild 查看第一个子节点；
lastChild 查看最后一个子节点；
nextSibling 查看后一个兄弟节点；
previousSibling 查看前一个兄弟节点；
用法：直接在某元素后面调用这些方法即可
div.parentNode----------指的就是查看div元素的父节点

2、遍历元素节点

parentElement 返回当前元素的父级元素节点
children 返回当前元素的 元素 子节点
node.childElementCount === node.children.length返回元素子节点的个数
firstElementChild 返回第一个元素节点
lastElementChild 返回最后一个元素节点
next/previousElementSibling 返回后一个/前一个元素节点

2）节点的四个属性：

1、nodeName 元素的标签名，以大写字母表示
2、nodeValue text/comment 节点的文本内容，可读写
3、nodeType 返回该节点的类型（返回数字，1 就代表元素节点）
4、attributes element 节点的属性集合

3）节点的一个方法

Node.hasChildNodes();
判断是否有子节点
返回值 true/false

四、 解决问题

共有7个节点。
直接调用childNodes方法

五、Dom继承树

注：
Node是构造函数，Document，CharacterData，Element，Attr都是构造函数，他们都是由Node构造函数构造出来的。

下面是一些方法：

1、getElementById方法定义在Document.prototype上，Element节点上不能使用

2、getElementByName方法定义在HTMLDocument.prototype上，非html中的document不能使用

3、getElementByTagName定义在Document.prototype和Element.prototype

4、HTMLDocument.prototype上定义了一些常用属性，body和head分别指代和标签。

5、Document.prototype上定义了documentElement属性，指代文档的根元素在HTML文档中，它总指代的是html标签

6、getElementByClassName,querySelectorAll(),querySelector()
在Document.prototype和Element.prototype上均有定义。

六、Dom的增删改插

1、增：
创建一个元素节点：document.createElement()
var div=document.createElement(“div”);

创建一个文本节点：document.createTextNode()
var text=document.createTextNode(“zhang”);

创建一个注释节点：document.createComment()
创建文档碎片节点document.createDocumentFragment()

2、插：
PARENTNODE.appendChild();
在一个父级元素中插入一个节点
任何一个元素节点都有这个方法
页面中原本就有的可以理解是一种剪切操作
页面中原本没有的元素调用此方法可以理解为push方法
var div=document.getElementsByTagName(“div”)[0];
创建一个文本节点
var text=document.createTextNode(“这是一个文本节点”);
将text节点插入到div里
div.appendChild(text);

PARENTNODE.insertBefore(a,b);
在一个父级元素中的元素节点b前插入元素节点a

3、删
在父级元素节点下删除子级元素节点：parent.removeChild();
直接删除子级元素节点：child.remove();

4、 替换
parent.replaceChile(new,origin);

5、Elemnet节点上的一些属性

innerHTML
改变一个元素里的html内容
可以进行读写，写会覆盖不是追加
想要追加可以 innerHTML+="";

innerText(not allow on firefox)

6、 Element节点上的一些方法

ele.setAttributes(“attrName”,“value”);给元素设置属性和值els.getAttributes(“attrName”);