js从0开始 DOM文档编程思路

DOM D文档 O对象 M模型

节点（node）：文档是由节点构成的集合，其中有三种节点：元素节点 文本节点 属性节点

元素节点为：<p> <ul><il>之类的元素

文本节点：<p>wenben</p>  p元素里面的文本为文本节点 

属性节点：对元素进行更具体的描述 例如 title class id 等被被包含在元素节点中

获取元素：有三种DOM方法可以获取元素节点：通过ID、标签、类名字获取

1 getElementById 返回一个与那个有着给定ID属性值的元素节点对应的对象。 getElementById区分大小写  document.getElementById(Id) 可以用typeof 操作符验证操作数是字符串、数值、函数、布尔值、对象。

例如 typeof document.getElementById("purchases")  会返回object告诉我们它是个对象。

2.getElementsByTagName 获取没有id属性的对象，返回一个对象数组.注意Elements的s

还可以用length属性查出这个数组的元素个数：document.getElementsByTagName("li").length

允许把一个通配符作为它的参数，可以知道文档里有多少元素节点：

 alert(document.getElementsByTagName("*").length);

1和2还可以结合起来：

var a=document.getElementById("purchases");

var b = a.getElementsByTagName("*");

alert(b.length);

将b数组将只包含在id属性为a的元素，查询a有多少个元素

3.getElementsByClassName 通过class属性中的类名来访问元素

getElementsByClassName(class)返回值与tagname类似，返回一个相同类名的元素的数组。

同时还可以查找带有多个类名的元素。要指定多个类名只要在字符串参数中用空格分隔类名，例如：document.getElementsByClassName("a b");

总结

• 一份文档就是一颗节点树
• 节点分为不同类型：元素节点、属性节点、文本节点等
• getElementById将返回一个对象，对象对应着文档里的一个特定的元素节点
• getElementsByTagName和getElementsByClassName将返回一个对象数组，分别对应着文档里的一组特定的元素节点
• 每个节点都是一个对象