DOM（包括获取元素节点的方法以及获取和设置元素节点的属性）



１.文档：DOM中的“D”

当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把编写的网页转化为一个文档对象。

2.对象：ＤＯＭ中的“Ｏ”

对象是是一种自足的数据集合，与某个特定对象相关联的变量被称为这个对象的属性；只能通过某个特定对象去调用的函数称为这个对象的方法。

js中对象分为三种：

（1）用户自定义对象

（2）内建对象：内建在js中的对象。包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。

（3）宿主对象：由浏览器提供的对象。包括DOM和BOM。

     window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM。

     DOM对此昂的主要功能是处理网页内容。

３.模型：ＤＯＭ中的“Ｍ”

DOM代表加载到浏览器窗口的当前网页，DOM把一份文档表示为一棵家谱树。浏览器提供了网页的模型，而我们可以通过js去读取这个模型。

4.节点：

DOM由许多不同的节点构成：元素节点、文本节点、属性节点等

5.获取元素：

有4种DOM方法可以获取元素节点：

（1）getElementById：document对象特有的函数，返回具有给定id的元素节点对应的对象。

（2）getElementsByTagName:返回一个数组，这个数组中的每个元素都是对象

     允许把通配符（“*”）作为参数，可获取文档中所有元素。

     getElementById和getElementsByTagName可结合起来使用：

     例如：

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

     var items=shopping.getElementsByTagName("*");

(3)getElementsByClassName:（html5 DOM新添的方法）返回一个具有相同类名的元素的数组。

     document.getElementsByClassName("inportant sale");类名的顺序与元素中类名的顺序不一致并不重要，就算元素带有更多                 的类名也没有关系。

     getElementsByClassName也可和getElementById结合使用。

     这个方法只有较新的浏览器才支持它，下面这个函数能适用于新老浏览器：

function getElementsByClassName(node,classname){
     if(node.getElementsByClassName){
          return node.getElementsByClassName("classname");
     }else{
          var result=[];
          var elems=document.getElementsByTagName("*");
          for(var i=0,len=elems.length;i<len;i++){
               if(elems[i].className.indexOf(classname)!=-1){
                    result[result.length]=elems[i];
               }
          }
          return result;
     }
}

（4） document.getElementsByName：通过元素名称来获取元素对象，返回的是一个数组

6.获取和设置属性
getAttribute()和setAttriute()方法不属于document对象，所以不能通过document对象调用，它只能通过元素节点对象调用。

这里有一个细节：通过setAttribute对文档做出修改之后，在通过浏览器查看源代码时看到的仍将是改变前的属性值，也就是说setAttribute做出的修改不会反映在文档本身的源代码里，这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面的内容进行刷新却不需要再浏览器里面刷新。