javascript基礎-DOM原理

解釋清楚DOM原理並非一件容易的事，可是任何一個前端工程師，都必須緊緊掌握它。

 

DOM總體架構：

圖解: DOM，即針對XML文檔的應用程序編程接口(API).通俗一點說，HTML屬於XML的一種，先將HTML映射成節點樹，而後對節點樹提供一套增刪改查的方法。

 

 

DOM1 Core:

  

 圖解:  1. Node: 節點接口。屬性：nodeType(1:element,2:attr,3:text)，nodeValue(屬性value值/節點的文本值)；方法:提供了’節點級‘的’上下左右‘增刪改查API。’節點級‘指的是，首先必須定位此節點。 ’上下左右‘指的是，parent，child，previous，next四個方向。查找API：parentNode父節點，  childNodes子節點集，previousSibling()往前兄弟節點集，nextSibling()日後兄弟節點集，firstChild()，lastChild()；刪改查(僅提供’下‘)：appendChild()加到子節點最後面，replaceChild()，removeChild()，insertBefore()插入到某節點前。

          2. HTML Docment。屬性：title； 方法：‘範圍級’(’範圍級’指不須要定位到節點，整個文檔範圍內)增查API:getElementsByTagName(),getElementById(),getElementsByName();createElement(); IO流API:wirte(),writeln(),open(),close().此API基本用不到，由於它會重寫，將文檔原有內容徹底覆蓋； 文檔碎片：createDocumentFragment()，開闢新的微型DOM空間，此空間內，你能夠應用DOM方法，操做完畢後，再一次加入DOM樹。和innerHTML有殊途同歸之妙。  都是爲減小對DOM的訪問。  標準檢測：implementation.hasFeature. 少用，緣由是瀏覽器常會返回true。但並不保證支持。通常用能力檢查，譬如判斷是否支持‘Worker’，寫 if(Worker){};

          3. HTML Element。 屬性：id，className，title；方法：對屬性的增刪改查API，如getAttribute();  咱們操做原生屬性，好比id，會直接element.id/element.id='XXX'/element.id=null; 若是是自定義屬性，則必須經過屬性API才能訪問到。

          4. 三大集合：NodeList(節點集合)，HTMLCollection,NamedNodeMap(屬性map)；三大集合都是實時同步的。訪問三大屬性必定要用變量緩存，不然容易形成內存泄露。

 

 

DOM1 Core:

圖解:  1. Selectors API: 經過樣式訪問DOM節點。

         2. Element Traversal API：NodeList會返回Text節點，此API能夠避免此問題，僅返回Element。

 

 

 

DOM2-3Core:

圖解:  1. DOM2 Core主要是增長了對命名空間的支持，針對混合XML語言，好比HTML,SVG混合的界面，HTML標籤上須要增長xmlns：命名空間URL；DOM上，則methodName+NS;第一個參數傳命名空間URL。

      

 

DOM2-3Style:

圖解:  1. 文檔的樣式分爲行內樣式，內嵌樣式，外聯樣式。element.style能夠對行內樣式直接進行增刪改查操做。如element.sytle/element.sytle.height='90px;'/elment.style.height='auto';若是要獲取計算出來的樣式，需window.getComputedStyle();實際上讀行內樣式是毫無心義的，緣由是那不是真正做用它的樣式。可是操做，僅容許對行內樣式進行修改。它的優先級最高，會覆蓋其餘類型樣式。特殊狀況，其餘類型樣式設置了‘!important’,行內樣式也需帶上‘!important’才能覆蓋。

         2. 三大高寬：offsetHeight/offsetWidth: contentHeight/Width+padding+滾動條+border。clientHeight/clientWidth:contentHeight/Width+padding; scrollHeight/scrollWidth:Math.max(scrollHeight/Width, clientHeight/clientWidth);scrollTop,scrollLeft;(IE6-的contentHeight=contentHeight+padding+border);

         3. 位置：getBoundingClientRect()獲取top，left，right，bottom；IE-的座標從2,2開始。

      

 

HTML5 DOM：

 

圖解:  HTML5爲未來的DOM擴展指引方向(能夠理解爲對現存的DOM不滿，搶DOM制定小組的飯碗)

         document.activeElement：當前獲取了焦點的元素。

         element.dataset： 在元素裏自定義屬性‘data-XXX’.經過element.dataset能夠獲取到自定義屬性集。

         element.insertAdjacentHTML(): 針對DOM1 ‘節點級’增刪改查的字符串實現。提供‘beforebegin,afterbegin,beforeend,afterend’上下左右四個方向，容許插入DOM字符串。

         scrollIntoView(true/false): true：將元素滾動到與視窗頂部持平；false：相反，與底部持平。

         DOMTokenList： element.classList 獲取className的集合對象