DOM（一）DOM简介及查找元素的几个方法、操作特性

一、概念：
DOM即稳当对象模型，是针对HTML和XML文档的一个API（应用程序接口）
D：可以理解为整个web加载的网页文档
O:（对象）类似window对象,可调用属性和方法
M:（模型）网页文档的树形结构
节点层次：数据结构中描述的树形结构可以很好的解释HTML的节点之间的关系。节点可分为三类：
元素节点：
文本节点：标签内的纯文本
属性节点：其实就是标签的属性，如：id=”box”
二、查找元素的几个方法详解
1、getElementById():
括号里传递一个元素的id值，这样便可以获取该元素的节点（此处id值需注意大小写！）
PS：如果设置了这个但是查找不到元素，先别慌，看看是不是文档还没有加载便执行了js代码（DOM操作必须等待HTML文档加载完毕才可以获取元素节点的！！！）
解决方法：把js标签移到文档后面或者使用onload加载事件
具体使用方法如下：

window.onload=function(){
    var box=document.getElementById("box");     //  !节点元素属性
    alert(box.tagName); //获取这个元素节点的标签名（此处打印大写DIV）
    alert(box.innerHTML);//获取元素节点里的内容(文本包含HTML的标签)，非W3C DOM规范(纯文本不包含标签)文本内容
    alert(box.id);//获取这个元素的id属性值
    alert(box.title);//获取title属性的值
    alert(box.style.color);//[object CSS2Properties]即style属性对象
    alert(box.className); //获取class属性的值
    alert(box.aaa); //自定义的属性获取不到undefined
    box.innerHTML="你是谁"; //可替换内容  可以解析html
    alert(box.innerHTML);  
};     

2、getElementsByTagName()
括号里填写需要查找的元素名称，一般返回一个数组集合
如果括号里是*则返回所有元素

//HTML代码
<ul>
         <li> 1 </li>
         <li> 2 </li>
         <li> 3 </li>        
</ul>
//js代码
 window.onload=function(){
              var i= document.getElementsByTagName('li');
              alert(i);        //[object HTMLCollection]   返回一个数组集合
    元素        alert(i.length);   //3个
              alert(i[0]);//[object HTMLLIElement] alert(i.item[0]);
              alert(i[0].tagName);//大写的LI
           }
              var body=document.getElementByTagName('*');//返回所有

3、getElementsByName()
该 方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。
三、操作特性
1、getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。

 document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
          document.getElementById('box').mydiv      //获取元素的自定义属性值，非IE不支持

这里需要注意的是，有两类特殊的特性，虽然它们有对应的属性名，但是属性的值与通过getAttribute()返回的值并不相同，即style和onclick。
style用于通过css为元素指定样式，通过getAttribute()访问返回的style特性值包含的是CSS文本，而通过属性访问它则返回一个对象。
onclick该特性中包含的是js代码，通过getAttribute()访问返回相应的代码，但是通过属性访问则返回一个js函数。
一般为避免这些差别，尽量使用对象的属性。
2、setAttribute()方法将设置元素中某个属性和值。
它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。若不存在，则创建一个。（推荐使用属性来设置特性）
3、removeAttribute()方法 用于彻底删除元素的特性（会从元素中完全删除特性！）