亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

nodetype：文檔節點類型

判斷節點類型的方法：

1、定義一個節點：

<div id="content">內容</div>

2、使用JavaScript判斷——定義變量divNode，通過id獲取節點并賦值給變量：

var divNode = document.getElementById("content");

3、if或switch語句判斷節點類型

（獲取節點divNode的節點類型）divNode.nodeType ==Node.ELEMENT_NODE(或者1）【相比較的節點類型的字符常量（或者數字常量）】；

alert（）語句回應。

divNode：指div元素節點；

attrNode：指div元素節點的屬性節點id；

textNode：指div節點的id節點的內容；

commentNode：指注釋節點；

文檔類型節點直接打印，路徑：document.doctype. ? ? ;

frag：指文檔片段節點，一般使用JavaScript添加。

節點類型圖

1. 包含關系：parentNode.contains(childNode)

2. 不支持contains

   （1）document.contains(cNode)--->ie不支持

   （2）不支持文本節點

3. 寫一個全兼容方法
   

節點類型的判斷

1. ? 低版本的ie不支持document.addEventListener方法、（ie支持： attachEvent），所以：

   if(document.addEventListener){

   ? ?document.addEventListener('DOMContentLoad', fn(), false)

   }else{

   ? ? 執行兼容的ie的方法

   }

2. domContentLoad兼容低版本ie方法:

   （1）保證執行一次，最外面定義一個done=false

1. （2）監聽document的加在狀態：

   
   

   （3）在dom創建完的判斷

   
   

   
   

   
   

domReady實現策略：

1. window.onload // 所有資源都加在完畢后才會調用（不適用圖片過多的頁面）

2. DOMContentLoaded // $(document).ready(function(){})實現原理解釋用了DOMContentLoaded ；
   

渲染引擎的渲染過程

1. 解析html、構建dom樹

2. 構建渲染樹（解析樣式信息）

3. 布局渲染樹（布局dom節點）

4. 繪制渲染樹（繪制dom節點）

1. 元素節點

   （1）獲取：dom = document.getElementById()

   （2）dom,nodeName/dom.nodevalue

2. 屬性節點

   （1）attr = dom.attributes[0];

   （2）attr.nodeName/attr.nodeValue

3. 文本節點

   （1）textNode = dom.childNodes[0];
   

   （2）textNode.nodeName/textNode.nodeValue

4. 注釋節點

   （1）commentNode = document.body.childNodes[1]

   （2）commentNode.nodeName/commentNode.nodeValue

   （3）document.body.childNodes[0]為一片空白，具體看截圖例子

5. doctype節點

   （1）document.doctype.nodeName

   （2）document.doctype.nodeValue

6. fragment節點（文檔片段節點）

   （1）frag = document.createDocumentFragment()

   （2）frag,nodeName/frag.nodeValue

   
   

7. 
   

8. 
   

1. divDom.nodeType == Node.ELEMENT_NODE // 字符常量

2. divDom.nodeType == 1 // 數字常量
   

節點的類型

window.onload方法是頁面DOM樹創建完成，外部css、js等引用全部加載完成后才執行window.onload的js代碼

DOMReady實現策略

在頁面的DOM樹創建完成后（也就是HTML解析第一步完成）即出發，而無需等待其他資源的加載。即DOMReady實現策略：

1. 支持DOMContentLoaded事件的，就使用DOMContentLoaded事件

2. 不支持的，就用來自Diego Perini發現的著名Hack兼容。兼容原理大概就是，通過IE中的document.documentElement.doScroll("left")來判斷DOM樹是否創建完畢。
   

• 元素節點 ?ELEMENT_NODE ?1

• 屬性節點 ?ATTRIBUTE_NODE ?2

• 文本節點 ?TEXT_NODE ?3

• 注釋節點 ?COMMENT_NODE ?8

• 文檔節點 ?DOCUMENT_NODE ?9

• 文檔類型節點 ?DOCUMENT_TYPE_NODE ?10

• 文檔片段節點 ?DOCUMENT_FRAGMENT_NODE ?11