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

reset.css鏈接地址：

http://meyerweb.com/eric/tools/css/reset/

object適用于IE瀏覽器，embed適用于非IE瀏覽器

11:07

?看視頻

了解dom節點繼承層次有什么作用？元素節點和文本節點的繼承層次有那些不同，可以看到原型的自有屬性都有很多，這個可以使用框架去處理，無需自己處理，但是還是有必要了解。react框架的虛擬dom的概念也可以去了解了解

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

2.不支持contains

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

（2）不支持文本節點

3.寫一個全兼容方法

判斷XML和HTML的方法： 先使用isElememt判斷是否為元素節點，再用creatElement判斷元素名大寫小寫是否都等同，大小寫不等同為XML，等同為HTML

判斷一個節點是否是元素節點的方法：

<div id="test">aaa</div>

<!--這是一個注釋節點-->

<script>

var testDiv = document.createElement('div');

var isElement = function (obj) {

? ? if (obj && obj.nodeType === 1) {//先過濾最簡單的

? ? ? ? if( window.Node && (obj instanceof Node )){ //如果是IE9,則判定其是否Node的實例

? ? ? ? ? ? return true; //由于obj可能是來自另一個文檔對象，因此不能輕易返回false

? ? ? ? }

? ? ? ? try {//最后以這種效率非常差但肯定可行的方案進行判定

? ? ? ? ? ? testDiv.appendChild(obj);

? ? ? ? ? ? testDiv.removeChild(obj);

? ? ? ? } catch (e) {

? ? ? ? ? ? return false;

? ? ? ? }

? ? ? ? return true;

? ? }

? ? return false;

}

var a = {

? ?nodeType: 1

}

console.log(isElement(document.getElementById("test")));

console.log(isElement(document.getElementById("test").nextSibling));

console.log(isElement(a));

</script>

必須掌握元素節點類型的判斷：

元素節點（Element）:1

屬性節點（Attribute）:2

文本節點（Text）:3

注釋節點（Element）:8

文檔節點（Document）:9

文檔類型節點（DocumentType）:10

文檔片段節點（DocumentFragment）:11

元素節點類型判斷的四個方法：

1.isElment

2.isHTML

3.isXML

4.contains

isElement? 是否是元素節點
isHTML???? 是否是HTML的元素節點
isXML????? 是否是XML的元素節點
contains?? 是否是包含關系

window.onload: 等所有資源加載完 document.ready: DOM樹構建完資源還沒加載完 應該使用ready保證用戶體驗。否則當網站有很多圖片資源時要很長時間才能加載完這段時間內Js都用不了

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

if(document.addEventListener){

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

}else{

? ? 執行兼容的ie的方法

}

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

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

https://img1.sycdn.imooc.com//5b5ed0770001539308210313.jpg

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

https://img1.sycdn.imooc.com//5b5ed04f0001a9f609990344.jpg

（3）在dom創建完的判斷

https://img1.sycdn.imooc.com//5b5ed0670001f2a910410509.jpg

domReady實現策略：

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

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

渲染引擎的渲染過程

1. 解析html、構建dom樹

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

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

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

divNode：指div元素節點；

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

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

commentNode：指注釋節點；

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

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

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（）語句回應。

本案例是“文檔片段節點”的添加案例。

innerHTML：設置或返回表格行的開始和結束標簽之間的 HTML。

appendchild：向節點添加最后一個子節點。一般用法：

? ? ? ? ? ? ? ? 對象名.appendchild（添加內容的對象名，如：li）；

? ? ? ? ? ? ? ? document.getElementById(被添加者，如：list-node).appendChild(對象名，如frag)；

2、節點分類

Element：如html、head、meta、title、body、div、ul、script等；

Attr：非文檔樹的一部分，包含于元素節點，如：lang、charset、id等；

Ttext：字符數據，可有空白和更多的數據組成，元素的屬性內容和屬性的文本內容都是由Text表示，如標簽間的文字，標簽到標簽間的空白；

Comment：文檔中的注釋內容；

Document：文檔樹的根節點，是其他節點的父節點，飛html、XML的根元素，因在其中像注釋節點可在文檔之外。我們將整個代碼之上看做文檔節點既document節點，它包含兩個節點，分別是doctype節點和html節點；

DocumentType：每個document節點都有一個documenttype節點，其值或是 ?（now？）或者document對象，如：<!DOCTYPE>定義就是documenttype節點；

DocumentFragment：是輕量級的或者最小的document對象，它表示文檔的一部分或者一段，不屬于文檔樹，其有一個十分有用的特殊行為，如,當請求把一個documentfragment節點插入到文檔樹的時候，插入的不是documentfragment節點自身，而是它的子孫節點，此時它是有用的占位符，暫時存放那些一次插入的節點，同事它有利于實現文檔的剪切、復制、粘貼等操作，如：frag。

HTML控制展示內容，CSS控制樣式顯示，JavaScript賦予HTML行為。利用BOM對象來操作瀏覽器對象。DOM提供接口讓我們操作HTML元素。