DOM;

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM
   在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

3. window 是 BOM 对象，而非 js 对象；

   DOM节点
   节点分为两个：文本节点和元素节点；
   子节点：

         childNodes是文本节点和元素节点都计算的；
         假设我们用childNodes给li加背景颜色，就会报错，因为文本的节点没有style的；
         可以用nodeType来进行选择节点类型；
   
     window.onload=function() {
      var oUl=document.getElementById('ul1')
      for (var  i=0;i<oUl.childNodes.length;i++) {
          //alert(oUl.childNodes[i].nodeType);
          //当弹窗 nodeType=3  ->文本节点
          //当弹窗 nodeType=1  ->元素节点
          if(oUl.childNodes[i].nodeType==1) {
              oUl.childNodes[i].style.background='red';
          }
      }

   }

   nodeType==3 –> 是文本节点；nodeType==1–> 是元素节点；
   我们只需元素的节点就可以了，可以用if的语言来判断.
   

   children:

   如果不这么用，也可以用children：
   这不需要处理文本节点和元素节点；仅仅会计算元素节点；
   子节点只计算一层，子节点里面包含的内部子节点是不计算的；
   

   父节点：

   parentNode 可返回某节点的父节点(获取的是结构上的父级);

   offsetParent 距离该子元素最近的进行过定位的父元素;

   首位子节点：

   firstChild;//兼容IE
   firstElementChild;//兼容FF
   解决办法：
         1): if判断浏览器； 
         2): var oFirst = oUl.firstChild||oUl.firstElementChild;
         lastChild;//兼容IE
         lastElementChild;//兼容FF
         解决办法同上；
   

   兄弟节点：

     nextSibling;//兼容IE
     nextElementSibling;//兼容FF
     解决办法：
         1): if判断浏览器；
         2): var oFirst = oUl.nextSibling||oUl.nextElementSibling;
         previousSibling;//兼容IE
         previousElementSibling;//兼容FF
         解决办法同上；   
   

   DOM方式操作元素属性：

      getAttribute(名称);//获取元素属性；
      setAttribute(名称,值);//设置元素属性；
      removeAttribute(名称);//删除元素属性；
      用className选择元素：
      
             function getByClass(oParent,sClass){
              var aEle = oParent.getElementsByTagName('*');
              var aResult=[];
      
               for (var i = 0; i < aEle.length; i++) {
                   if(aEle[i].className==sClass){
                      aResult.push(aEle[i]);
                   }
               };
               return aResult;
          }
      
          window.onload=function(){
              var oUl = document.getElementById('ul1');
              var oBox = getByClass(oUl,'box');
      
              for (var i = 0; i < oBox.length; i++) {
                  oBox[i].style.background="red";
              };
          }