DOM基礎知識（概念、節點樹、事件、Document）
1、 DOM概念
全稱為 Document Object Model，譯為文檔對象模型
D：文檔 - DOM將HTML頁面解析為一個文檔 —> document對象
O：對象 - DOM將HTML頁面中內容解析為對應的對象
M：模型 - DOM中對象之間的關系(節點樹結構)
DOM的級別：0 級別：不是W3C的規範； 1、2、3級是W3C規範
l W3C對DOM的定義
DOM是一個獨立於任何語言和平臺的接口，允許任何語言或腳本動態地訪問和更新HTML文檔的內容、結構和樣式。該HTML頁面可以進一步處理，並且該處理的結果可以被合並到所呈現的HTML頁面中。
l DOM的組成部分
DOM CORE； DOM HTML； DOM CSS； DOM XML；
2、DOM節點樹
2 DOM樹結構
將HTML頁面解析為一個樹形結構
l 節點：
概念：樹結構中每個連接的地方(元素、屬性和文本)
(1)文檔節點---表示整個HTML 頁面（相當於document 對象）
(2)元素節點---表示HTML頁面中的標簽（即HTML頁面的結構）
(3)屬性節點：
(4)文本節點---表示HTML頁面中的標簽所包含的文本內容。
l 判斷節點類型：
3、事件
概念：HTML頁面或者瀏覽器窗口發生的一些交互瞬間
分類：鍵盤事件
鍵盤事件表示當用戶操作鍵盤時發生。
onkeydown 用戶按下一個按鍵； onkeyup 用戶松開一個按鍵
onkeypress 鍵盤的按鍵按了一下（ keydown + keyup 的組合）
oninput 輸入事件
event事件對象提供哪些獲取到有關鍵盤的屬性
charCore 得到對應鍵盤的值-97
keyCode 得到對應鍵盤的值-97
which 得到對應鍵盤的值-97
註：三個event事件對象的屬性，IE8及以下版本均不支持
key 得到對應鍵盤的值-a
鼠標事件
click 用戶單擊鼠標按鍵； dblclick 用戶雙擊鼠標按鍵
mousedown 用戶按下鼠標按鍵； mouseup 用戶松開鼠標按鍵
mouseover 用戶將鼠標移到指定標簽上； mousemove 用戶移動鼠標
mouseout 用戶將鼠標從指定標簽上移開
- ? 事件的執行流程：
獲取 HTML 頁面中指定的標簽；為指定標簽綁定指定事件；編寫事件發生時的邏輯代碼。
var 名稱 = document.getElementById(‘id的名稱‘);
名稱.onclick=function( ){內容輸出}
- ? HTML文檔的加載：
想要在head裏面運行script 需要head中script添加window.onload = function( ){ }
4、Document對象
document對象作為DOM解析HTML頁面的入口
u DOM查詢
2 優點：速度快，性能好； 缺點：單操作麻煩
getElementById( ):通過元素的id屬性查找
註: 元素的id屬性值必須是唯一的; 通過該方法獲取的元素只能是唯一的
getElementsByName( ):通過元素的name屬性查找
註: 元素的name屬性不唯一，可能多個元素相同name屬性; 通過該方法獲取的元素可能是一個，也可能是多個。結構非常類似於數組的結構，但並不是一個數組。
結果類型—> NodeList(節點集合)；類似於數組結構的對象—>類數組對象
getElementsByTagName( ) :通過元素的標簽名查找
getElementsByClassName( ):通過元素class屬性查找(新增方法，IE 8及以下瀏覽器不可
解決兼容性問題 -自定義函數
function getElementsByClassName(element,className){
if(document.getElementsByClassName){
}else{
}
}
2 優點：操作方便； 缺點：速度慢，性能差
querySelector( ) - 利用CSS選擇器的用法
作用：返回與css選擇器匹配的第一個元素
querySelectorAll( ) - 利用CSS選擇器的用法
作用：返回與css選擇器匹配的所有元素
u NodeList類型
- 動態NodeList
含義 - 獲取的集合隨著頁面的變化而變化； 特點 - 執行速度快，耗時短
方法：getElementsByName( ) getElementsByTagName( ) getElementsByClassName( )
- 靜態NodeList
含義 - 獲取的集合不會隨著頁面而變化； 特點 - 執行速度慢，耗時長
方法 - querySelectorAll()
u 創建節點:
2 元素節點 - createElement(‘標簽名‘)
2 屬性節點 - createAttribute(‘屬性名‘)
步驟： [創建屬性節點時，只能定義屬性名，而不能定義屬性值]
1. 創建屬性節點: var attr = createAttribute(‘屬性名‘)
2. 設置屬性節點的值: attr.nodeValue = value;
3. 添加屬性節點: A.setAttributeNode(B) 將B添加到A 上
註：屬性節點不是一個子節點,不可用 ( A)appendChild(B )
2 文本節點 - createTextNode(文本內容)
- ? document對象屬性(獲取元素)：
documentElement屬性：獲取頁面中<html>； 即document. documentElement
head屬性：獲取頁面中<head> ; 即document. head
body屬性：獲取頁面中<body>； 即document. body
forms屬性：獲取HTML頁面中所有的表單元素 即document. forms
images屬性：獲取HTML頁面的圖片元素 即document. images
DOM基礎知識（概念、節點樹、事件、Document）