DOM對象與事件系統

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 重置按鈕被點擊

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章