DOM;

joyvw 發布于2019-08-21 17:53 / 1340人閱讀

摘要：是的標準所有瀏覽器公共遵守的標準是各個瀏覽器廠商根據在各自瀏覽器上的實現表現為不同瀏覽器定義有差別實現方式不同是對象，而非對象節點節點分為兩個文本節點和元素節點子節點是文本節點和元素節點都計算的假設我們用給加背景顏色，就會報錯，因為文本的節

DOM 是 W3C 的標準； [所有瀏覽器公共遵守的標準]

BOM 是各個瀏覽器廠商根據 DOM
在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]

window 是 BOM 對象，而非 js 對象；

DOM節點
節點分為兩個：文本節點和元素節點；
子節點：

      childNodes是文本節點和元素節點都計算的；
      假設我們用childNodes給li加背景顏色，就會報錯，因為文本的節點沒有style的；
      可以用nodeType來進行選擇節點類型；

  window.onload=function() {
   var oUl=document.getElementById("ul1")
   for (var  i=0;i文本節點
       //當彈窗 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";
           };
       }

GPU云服務器云服務器 DOM dom0和dom2 python dom XML DOM

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90169.html

前端抽象世界之DOM與Virtual DOM

摘要：它是輕量級的，與特定于瀏覽器的實現細節分離。由于本身已經是抽象，因此虛擬實際上是抽象的抽象。它允許在這個抽象的世界中進行計算，并跳過真正的那些緩慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM這個技術，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個人理解。以下的D...

plokmju88 2019-08-02 12:00 評論0 收藏0
前端抽象世界之DOM與Virtual DOM

摘要：它是輕量級的，與特定于瀏覽器的實現細節分離。由于本身已經是抽象，因此虛擬實際上是抽象的抽象。它允許在這個抽象的世界中進行計算，并跳過真正的那些緩慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM這個技術，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個人理解。以下的D...

joy968 2019-08-26 12:23 評論0 收藏0
虛擬DOM

摘要：什么是虛擬舉例說明如果網頁中有一個表格，表頭是姓名，年級，分數。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數據。當狀態變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

yanwei 2019-08-23 12:11 評論0 收藏0
虛擬DOM

摘要：什么是虛擬舉例說明如果網頁中有一個表格，表頭是姓名，年級，分數。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數據。當狀態變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

alin 2019-08-02 11:37 評論0 收藏0
虛擬Dom詳解 - (一)

摘要：為此也做了一些學習簡單的侃一侃虛擬到底是什么虛擬詳解二什么是虛擬虛擬首次產生是框架最先提出和使用的，其卓越的性能很快得到廣大開發者的認可，繼之后也在其核心引入了虛擬的概念。所謂的虛擬到底是什么也就是通過語言來描述一段代碼。隨著Vue和React的風聲水起，伴隨著諸多框架的成長，虛擬DOM漸漸成了我們經常議論和討論的話題。什么是虛擬DOM，虛擬DOM是如何渲染的，那么Vue的虛擬Dom...

ashe 2019-08-26 10:36 評論0 收藏0