1)DOM: Document Object Model 文檔對象模型
解釋: 將標記語言文檔的各個組成部分,封裝爲對象. 可以使用這些對象,對標記語言文檔進行CRUD的動態操作.
文檔模型:
html文檔-->dom樹
DOM定義了HTML和XML文檔的標準.
DOM標準:
基本核心DOM:
Document: 文檔對象
Element: 元素對象
Attribute: 屬性對象
Text: 文本對象
Comment: 註釋對象
Node: 節點對象,其它5個對象的父對象
XML DOM
HTML DOM:
2)核心DOM模型:
(1)創建:
打開一個頁面-->首先是包含了Window對象-->Window對象中又包含了DOM對象;
(2)獲取:
在HTML DOM中可以用 window.document 來獲取, DOM對象是window對象的一部分;
在XML DOM中就不能這樣獲取了;
(3)方法(2類方法):
1.獲取Element對象:
getElementById(xxx): 根據id屬性值獲取元素對象, id屬性值一般唯一;
getElementsByTagName(): 根據元素名稱獲取元素對象列表; 如: 通過div標籤;
getElementsByClassName(): 根據Class屬性獲取元素對象列表;
getElementsByName(): 根據name屬性值獲取元素列表.
2.創建其它DOM對象:
createAttribute():
createComment():
createElement() 重點:
createNode():
(4)屬性:
3)Element元素對象:
1.獲取: 通過document獲取和創建
2.方法:
removeAttribute():刪除屬性
setAttribute(): 設置屬性
筆記:動態對DOM的元素的屬性進行增刪改查
3.屬性:
4)Node: 節點對象,其它5個的父對象
特點: 素喲偶逇dom對象都可以被認爲是一個節點;
方法:
CURD dom樹:
appendChild(): 向節點的子節點列表的結尾添加新的子節點
removeChild(): 刪除(並返回)當前節點的指定子節點
replaceChild(): 用新節點替換一個子節點
屬性: parentNode
5)HTML DOM:
(1)是關於如何獲取、修改、添加、或 刪除 HTML元素的標準;
標籤體的設置和獲取: innerHTML
(2)使用html元素對象的屬性
(3)控制元素樣式:
1.使用元素的style屬性來設置
2.提前定義好選擇器的樣式
6)事件監聽機制:
(1)概念
事件: 某些操作. 如: 單機、雙擊、鍵盤按下了、鼠標移動了.
事件源: 組件. 如: 按鈕、文本輸入框
監聽器: 代碼.
註冊監聽: 將事件、事件源、監聽器結合在一起. 當事件源上發生了事件,則觸發執行某個監聽器代碼.
(2)事件分類:
1.單擊事件:
onclick: 單擊
ondblclick: 雙擊
2.焦點事件:
onblur: 失去焦點
onfocus: 元素獲得焦點
3.加載事件
1.onload: 一張頁面或一副圖像完成加載完畢後調用.
4.鼠標事件
1.onmousedown 鼠標按鈕被按下
2.onmouseup: 鼠標按鍵被鬆開
3.onmousemove: 鼠標被移動
4.onmouseover: 鼠標移到元素之上
5.onmouseout: 鼠標從某元素移開
5.鍵盤事件
1.onkeydown: 某個鍵盤按鍵被按下
2.onkeyup: 某個鍵盤按鍵被鬆開
3.onkeypress: 某個鍵盤按鍵被按下並鬆開
6.選中和改變
1.onchange 域的內容被改變
如: 三級聯動 省市區
2.onselect 文本被選中
7.表單事件
1.onsubmit 確認按鈕被點擊
2.onreset 重置按鈕被點擊