javascript dom 学习笔记（一）

DOM

一。定义

DOM中的D指document(文档),没有document，DOM就无从谈起

DOM中的O指Object(对象),Object分为：1）用户定义对象，指程序员自己定义的对象。2）内建对象，指javascript语言中的对象，如Array，Date，Math等。3）宿主对象，指依附载体提供的对象，即指浏览器提供的对象，如window，document，node等

DOM中的M指model（模型）,某种事物的表现形式。

二。

DOM把一份文档表示为一棵树，DOM把文档表示为一颗家谱树，家谱树表示一个人家族的谱系，并使用parent（父类），child（子类），sibling（兄弟）等记号表明家族成员之间的关系。

三。节点（node）

在DOM里有许多不同类型的节点如，元素节点、文本节点、属性节点。

1.元素节点(nodeType==1),如果把web文档比作一座大厦，元素就是大厦的砖块，这些元素在文档中的布局形成了文档的结构。标签的名字就是元素的名字，文本段落元素的名字P，无序清单元素的名字是ul，列表项元素的名字是li。

2.文本节点(nodeType==3)，其实就是包含在元素节点之间的内容。

3.属性节点(nodeType==2)，用来对元素做出更具体的描述。如<p title="hello"></p>中的title就是属性节点。

ps:节点伤的各个元素都会继承父元素的样式属性(css)。

四。获取元素

ps:文档中的每一个元素都是一个对象。

有三种获取元素节点的方法，分别通过元素ID（document.getElementById），标签名字(document.getElementsByTagName)和通过类名字获取(document.getElementsByClassName，ＨＴＭＬ５中新增的方法)。

三者可以组合使用：

var a1 = document.getElementById('a1');

var a2 = a1.getElementsByClassName('a3'); //返回数组

介于getElementByClassName是HTML5所支持的，也就是很多老的浏览器不支持，所以可以通过这个函数进行实现

function getElementsByClassName(node,classname){ 

if(node.getElementsByClassName){ 

return node.getElementsByClassName(classname);

}else{ 

var results = [];

var elems = node.getElementsByTagName('*');

for(var i=0,j=elems.length;i<j;i++){ 

if(elems[i].className.indexOf(classname)!=-1){ 

results[results.length]=elems[i];

}

}

return results;

}

}

参考：javascript DOM 编程艺术。