-
渲染引擎的渲染過程解析html、構建dom樹構建渲染樹（解析樣式信息）布局渲染樹（布局dom節點）繪制渲染樹（繪制dom節點）
查看全部 -
特點
1.1課程介紹
1.DOM是Docunment、object、Model的縮寫，直譯過來就是文檔對象模型。
2.DOM的地位和作用
1.HTML→CSS(定義樣式)
2.HTML→JavaScript（賦予行為）
通過JavaScript實現頁面的交互和動畫效果等等。
3.那么JavaScript通過什么來實現的呢？
1.通過ECMAScript標準，我們可以編寫程序讓瀏覽器來解析
2.利用ECMAScript我們可以通過BOD對象來操作瀏覽器窗口、
瀏覽器導航對象、屏幕分辨率、瀏覽器歷史、Cookies等等
3.但是通過BOD來實現的交互遠遠不夠,要實現頁面的動態交互
和效果，操作HTML才是核心。
4.那么如何操作HTML呢，那就是DOM。簡單來說，DOM給我們提
供了用程序來動態控制HTML的接口，也就是早期的DHTML的
概念。
5.因此DOM處在JavaScript賦予HTML具備動態交互的核心地位
上。
注:BOM(Browser Object Model) 是指瀏覽器對象模型
cookies （從客戶端的硬盤讀取數據的一種技術）
3.DOM探索系列課程要點
1.想要安全的操作DOM必須等到頁面上所有的HTML都解析成DOM節點，
才能進行操作，因此了解DOMReady是第一步。
2.接著我們來探究節點，學習文檔和節點的類型，元素節點的判斷、
元素節點的繼承層次、以及節點的分類等內容。
3.然后學習節點的操作，比如節點創建與刪除、節點查找與篩選等。
4.接著學習表格與表單的操作
5.最后我們探討屬性系統和樣式設置
6.順序圖
1.DOMReady→2.節點探究→節點創建與刪除→節點查找與篩選→
表單與表格操作→屬性系統→樣式設置
4.基礎詳解篇課程要點
1.首先通過滑動門特效課堂案例感性認識DOM在開發中是如何運用的
2.其次，了解什么DOM以及與DOM相關的基礎概念
3.重新認識HTML與XHTML文檔類型，以及文檔的各種節點類型
4.接著詳細的實現DOMReady查看全部 -
渲染流程。
查看全部 -
nodeName與nodeValue
查看全部 -
DOM Ready: DOM樹構建完畢查看全部
-
DOM -- document object model 文檔對象模型
查看全部 -
<!DOCTYPE html>
<html>
<head>
????????<meeta charset="utf-8">
????????<title>nodeType</title>
</head>
<body>
<div id="contaiainer">這是一個元素節點</div>
<script>
????????var divNode=document.getElementById("container");
? ? ? ? ?if (divNode.nodeType==Node.ELEMNT_NODE){
}
</script>
</body>
</html>
查看全部 -
節點的包含contains 為考慮瀏覽器的兼容性，需要做判斷。 對于chrome等現代瀏覽器：無需做判斷，可直接運用節點的contains方法判斷節點的包含關系。 對于IE6等低版本瀏覽器:運用while循環通過判斷子節點的父節點是否===本節點？ 是，return true；否，return false。查看全部
-
在這種幸存者查看全部 -
IIEF-立即調用函數表達式
(function(){ /* code */ }()); // 老道推薦寫法(function(){ /* code */ })(); // 當然這種也可以
(function(test){
alert(test);
}(123));
查看全部 -
?????????offsetWidth： ??????獲取的是盒子最終的寬 ??????offsetHeight: ??????獲取的是盒子最終的高
查看全部
舉報