DOM;

joyvw 發(fā)布于2019-08-21 17:53 / 1336人閱讀

摘要：是的標(biāo)準(zhǔn)所有瀏覽器公共遵守的標(biāo)準(zhǔn)是各個(gè)瀏覽器廠商根據(jù)在各自瀏覽器上的實(shí)現(xiàn)表現(xiàn)為不同瀏覽器定義有差別實(shí)現(xiàn)方式不同是對(duì)象，而非對(duì)象節(jié)點(diǎn)節(jié)點(diǎn)分為兩個(gè)文本節(jié)點(diǎn)和元素節(jié)點(diǎn)子節(jié)點(diǎn)是文本節(jié)點(diǎn)和元素節(jié)點(diǎn)都計(jì)算的假設(shè)我們用給加背景顏色，就會(huì)報(bào)錯(cuò)，因?yàn)槲谋镜墓?jié)

DOM 是 W3C 的標(biāo)準(zhǔn)； [所有瀏覽器公共遵守的標(biāo)準(zhǔn)]

BOM 是各個(gè)瀏覽器廠商根據(jù) DOM
在各自瀏覽器上的實(shí)現(xiàn);[表現(xiàn)為不同瀏覽器定義有差別,實(shí)現(xiàn)方式不同]

window 是 BOM 對(duì)象，而非 js 對(duì)象；

DOM節(jié)點(diǎn)
節(jié)點(diǎn)分為兩個(gè)：文本節(jié)點(diǎn)和元素節(jié)點(diǎn)；
子節(jié)點(diǎn)：

      childNodes是文本節(jié)點(diǎn)和元素節(jié)點(diǎn)都計(jì)算的；
      假設(shè)我們用childNodes給li加背景顏色，就會(huì)報(bào)錯(cuò)，因?yàn)槲谋镜墓?jié)點(diǎn)沒(méi)有style的；
      可以用nodeType來(lái)進(jìn)行選擇節(jié)點(diǎn)類型；

  window.onload=function() {
   var oUl=document.getElementById("ul1")
   for (var  i=0;i文本節(jié)點(diǎn)
       //當(dāng)彈窗 nodeType=1  ->元素節(jié)點(diǎn)
       if(oUl.childNodes[i].nodeType==1) {
           oUl.childNodes[i].style.background="red";
       }
   }

}

nodeType==3 –> 是文本節(jié)點(diǎn)；nodeType==1–> 是元素節(jié)點(diǎn)；
我們只需元素的節(jié)點(diǎn)就可以了，可以用if的語(yǔ)言來(lái)判斷.

children:

如果不這么用，也可以用children：
這不需要處理文本節(jié)點(diǎn)和元素節(jié)點(diǎn)；僅僅會(huì)計(jì)算元素節(jié)點(diǎn)；
子節(jié)點(diǎn)只計(jì)算一層，子節(jié)點(diǎn)里面包含的內(nèi)部子節(jié)點(diǎn)是不計(jì)算的；

父節(jié)點(diǎn)：

parentNode 可返回某節(jié)點(diǎn)的父節(jié)點(diǎn)(獲取的是結(jié)構(gòu)上的父級(jí));

offsetParent 距離該子元素最近的進(jìn)行過(guò)定位的父元素;

首位子節(jié)點(diǎn)：

firstChild;//兼容IE
firstElementChild;//兼容FF
解決辦法：
      1): if判斷瀏覽器； 
      2): var oFirst = oUl.firstChild||oUl.firstElementChild;
      lastChild;//兼容IE
      lastElementChild;//兼容FF
      解決辦法同上；

兄弟節(jié)點(diǎn)：

  nextSibling;//兼容IE
  nextElementSibling;//兼容FF
  解決辦法：
      1): if判斷瀏覽器；
      2): var oFirst = oUl.nextSibling||oUl.nextElementSibling;
      previousSibling;//兼容IE
      previousElementSibling;//兼容FF
      解決辦法同上；

DOM方式操作元素屬性：

   getAttribute(名稱);//獲取元素屬性；
   setAttribute(名稱,值);//設(shè)置元素屬性；
   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";
           };
       }