17、DOM文档对象

DOM: Document Object Model 文档对象模型

DOM其实就是一些方法/属性 让我们能够通过js去操作文档，它是JS跟文档之间的一个桥梁。



                 

                           类型                           值       说明  

ELEMENT_NODE	1	元素节点	*
ATTRIBUTE_NODE	2	属性节点	*
TEXT_NODE	3	文本节点	*
CDATA_SECTIO 4000 N_NODE	4	CDATA 区段
ENTITY_REFERENCE_NODE	5	实体引用
ENTITY_NODE	6	实体
PROCESSING_INSTRUCTION_NODE	7	处理指令
COMMENT_NODE	8	注释节点	*
DOCUMENT_NODE	9	文档节点	*

注: * 表示常用

DOM节点相关操作；

NodeType:节点类型有12种（常见的有 元素节点1、文本节点3、属性节点2）；

子节点集合

childNodes：
     
  IE678只包含元素，其他包含文本和元素（包括非标准元素）；
        可以用 .length得到长度；

children：（只包含元素节点，推荐使用）；

第一个子节点

firstChild：IE678只会是元素，其他可能是文本或元素；

firstElementChild：IE678没有这个属性，其他第一个元素节点；

兼容程序如下：

function firstC( obj ){
return obj.firstElementChild!==undefined?obj.firstElementChild:obj.firstChild;
//obj.firstElementChild!==undefined?兼容obj的子元素节点为空的情况，当其为空的时候obj.firstElementChild=null<span style="color:#ff0000;">，而null==undefined，</span>因此要用不全等!===
}

最后一个子节点

lastChild（IE678只会是元素，其他可能是文本或元素；） 

lastElementChild : （E678没有这个属性，其他第一个元素节点）

下一个节点

nextSibling（IE678只会是元素，其他可能是文本或元素；） 

nextElementSibling（E678没有这个属性，其他第一个元素节点）

上一个节点

previousSibling（IE678只会是元素，其他可能是文本或元素；） 

previousElementSibling（E678没有这个属性，其他第一个元素节点）

元素的父节点

parentNode：

有定位属性的元素的父节点

offsetParent：

offsetLeft / offsetTop（元素实际的left值和top值）

备注：需要确切得到left和top值的时候用offsetLeft / offsetTop，采用document.get的方式有时候为auto值。

             没有offsetright和offsetbottom，

siblings（js自身没有siblings） 找到obj的同级兄弟(不包含自己)

function siblings(obj){
var parentC = obj.parentNode.children;//obj.parentNode找到其自身的父级元素节点，然后早自身父元素的所有子元素节点
var arr = [];
for ( var i=0;i<parentC.length;i++ )
{
if ( parentC[i] != obj )
{
arr.push(parentC[i]);
}
};
return arr;
}