DOM

一、节点
1. 元素节点

DOM的原子是元素节点（element node）。
各种标签提供了元素的名字。文本段落元素的名字是“p”，无序清单元素的名字是“ul”，列表项元素的名字是“li"。

2．文本节点
在“购物清单”例子里，<p>元素包含着文本“Don’t forget to buy this stuff.”。它是一个文本节点（text node）。

3．属性节点
在DOM中，title="a gentle reminder"是一个属性节点（attribute node），在前面的“购物清单”示例文档里，我们可以清楚地看到那个无序清单元素（<ul>）有个id属性。如果曾经使用过CSS，你们对id和class之类的属性应该不会感到陌生。

二、DOM提供的主要方法：这四个方法是将要编写的许多DOM脚本的基石。

1、getElementById()方法
这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。

document.getElementById("purchases")将返回一个id属性值是purchases对象(元素)。

2、getElementsByTagName()方法
将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。

//example 1,这个document里的"li"元素个数
var items=document.getElementsByTagName("li");
alert(items.length);

//example 2，"purchases"里的"li"元素个数
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");
alert(items.length);
alert(typeof items[0]);//第一个元素的类型=object

3、getAttribute()方法
至此，我们已经向大家介绍了两种检索特定元素节点的办法：一种是使用getElementById()方法，另一种是使用getElementsByTagName()方法。在找到那个元素后，我们就可以利用getAttribute()方法把它的各种属性的值查询出来。

getAttribute()方法不能通过document对象调用，这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。

//获得“p”元素的title属性的值，（如果“p”元素含有title属性的话）
 var paras = document.getElementsByTagName("p");
 for (var i=0; i< paras.length; i++) {
   var title_text = paras[i].getAttribute("title");
   if (title_text != null) {
  alert(title_text);
   }
 }

//获得id为"purchases"的元素的title属性(有问题)
var paras = document.getElementsById("purchases");
var title_text = paras.getAttribute("title");
alert(title_text);

4、setAttribute()方法(有问题)

它允许我们对属性节点的值做出修改。

function bbc(){var paras= document.getElementsById("purchases");
paras.setAttribute("title","121333");
alert(paras.getAttribute("title"));

}
window.οnlοad=bbc;
在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。

这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。