JavaScript基礎(三)

一.DOM

1.概念： Document Object Model 文檔對象模型

將標記語言文檔的各個組成部分，封裝爲對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作

2. W3C DOM 標準被分爲 3 個不同的部分

核心 DOM - 針對任何結構化文檔的標準模型

• Document：文檔對象
• Element：元素對象
• Attribute：屬性對象
• Text：文本對象
• Comment:註釋對象
• Node：節點對象，其他5個的父對象

XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

3. 核心DOM模型

Document：文檔對象

1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
   1. window.document
   2. document
2. 方法：
   1. 獲取Element對象：

1. getElementById()	： 根據id屬性值獲取元素對象。id屬性值一般唯一
2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組

2. 創建其他DOM對象：

createAttribute(name)
createComment()
createElement()
createTextNode()

3. 屬性
   • Element：元素對象
     1. 獲取/創建：通過document來獲取和創建
     2. 方法：
        1. removeAttribute()：刪除屬性
        2. setAttribute()：設置屬性
   • Node：節點對象，其他5個的父對象
     • 特點：所有dom對象都可以被認爲是一個節點
     • 方法：
       • CRUD dom樹：
         • appendChild()：向節點的子節點列表的結尾添加新的子節點。
         • removeChild() ：刪除（並返回）當前節點的指定子節點。
         • replaceChild()：用新節點替換一個子節點。
     • 屬性：
       • parentNode 返回節點的父節點。

4.HTML DOM

1. 標籤體的設置和獲取：innerHTML
2. 使用html元素對象的屬性
3. 控制元素樣式
   1. 使用元素的style屬性來設置

如：
	 //修改樣式方式1
	div1.style.border = "1px solid red";
	div1.style.width = "200px";
	//font-size--> fontSize
	div1.style.fontSize = "20px";

2. 提前定義好類選擇器的樣式，通過元素的className屬性來設置其class屬性值。

二.事件監聽機制

1.概念

某些組件被執行了某些操作後，觸發某些代碼的執行。

• 事件：某些操作。如： 單擊，雙擊，鍵盤按下了，鼠標移動了
• 事件源：組件。如： 按鈕 文本輸入框…
• 監聽器：代碼。
• 註冊監聽：將事件，事件源，監聽器結合在一起。 當事件源上發生了某個事件，則觸發執行某個監聽器代碼。

2.常見的事件：

1. 點擊事件：
	1. onclick：單擊事件
	2. ondblclick：雙擊事件
2. 焦點事件
	1. onblur：失去焦點
	2. 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	重置按鈕被點擊。