(深入JavaScript之BOM、DOM和事件)

BOM

概念

BOM全稱Browser Object Model浏覽器對象模型，将浏覽器的各個組成部分封裝成對象。

對象組成

Window：視窗對象
Navigator：浏覽器對象
Screen：顯示器螢幕對象
History：曆史記錄對象
Location：位址欄對象

Window：視窗對象

方法

與彈出框有關的方法

alert() 顯示帶有一段消息和一個确認按鈕的警告框。

confirm() 顯示帶有一段消息以及确認按鈕和取消按鈕的對話框。

如果使用者點選确定按鈕，則方法傳回true

如果使用者點選取消按鈕，則方法傳回false

prompt() 顯示可提示使用者輸入的對話框。

傳回值：擷取使用者輸入的值

與打開關閉有關的方法

close() 關閉浏覽器視窗。

誰調用我，我關誰

open() 打開一個新的浏覽器視窗

傳回新的Window對象

與定時器有關的方式

setTimeout() 在指定的毫秒數後調用函數或計算表達式。

參數：

js代碼或者方法對象
毫秒值

傳回值：唯一辨別，用于取消定時器

clearTimeout() 取消由 setTimeout() 方法設定的 timeout。

setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。

clearInterval() 取消由 setInterval() 設定的 timeout。

屬性

擷取其他BOM對象

history

location

Navigator

Screen:

擷取DOM對象

document

特點

Window對象不需要建立可以直接使用 window使用。 window.方法名();

window引用可以省略。方法名();

Location：位址欄對象

建立(擷取)：

window.location

location

方法：

reload() 重新加載目前文檔。重新整理

屬性

href 設定或傳回完整的 URL。

History：曆史記錄對象

建立(擷取)：

window.history

history

方法：

back() 加載 history 清單中的前一個 URL。

forward() 加載 history 清單中的下一個 URL。

go(參數) 加載 history 清單中的某個具體頁面。

參數：

正數：前進幾個曆史記錄

負數：後退幾個曆史記錄

屬性

length 傳回目前視窗曆史清單中的 URL 數量。

DOM

概念

DOM全稱Document Object Model 文檔對象模型，将标記語言文檔的各個組成部分，封裝為對象。可以使用這些對象，對标記語言文檔進行CRUD的動态操作。

W3C DOM 标準被分為 3 個不同的部分：

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

Document：文檔對象

Element：元素對象

Attribute：屬性對象

Text：文本對象

Comment:注釋對象

Node：節點對象，其他5個的父對象
XML DOM - 針對 XML 文檔的标準模型
HTML DOM - 針對 HTML 文檔的标準模型

核心DOM模型

Document：文檔對象

建立(擷取)：在html dom模型中可以使用window對象來擷取

1. window.document
2. document

方法：

擷取Element對象：
1. getElementById() ：根據id屬性值擷取元素對象。id屬性值一般唯一
2. getElementsByTagName()：根據元素名稱擷取元素對象們。傳回值是一個數組
3. getElementsByClassName():根據Class屬性值擷取元素對象們。傳回值是一個數組
4. getElementsByName(): 根據name屬性值擷取元素對象們。傳回值是一個數組
建立其他DOM對象：

createAttribute(name)

createComment()

createElement()

createTextNode()

Element：元素對象

擷取/建立：通過document來擷取和建立

方法

1. removeAttribute()：删除屬性
2. setAttribute()：設定屬性

Node：節點對象，其他5個的父對象

特點：所有dom對象都可以被認為是一個節點

方法

CRUD dom樹：
	 appendChild()：向節點的子節點清單的結尾添加新的子節點。
	 removeChild()	：删除（并傳回）目前節點的指定子節點。
	 replaceChild()：用新節點替換一個子節點。

屬性

parentNode 傳回節點的父節點。

HTML DOM

标簽體的設定和擷取：innerHTML
使用html元素對象的屬性
控制元素樣式

使用元素的style屬性來設定

如：

//修改樣式方式1

div1.style.border = "1px solid red";

div1.style.width = "200px";

//font-size--> fontSize

div1.style.fontSize = "20px";
提前定義好類選擇器的樣式，通過元素的className屬性來設定其class屬性值。

事件監聽機制

概念

概念：某些元件被執行了某些操作後，觸發某些代碼的執行。

事件：某些操作。如：單擊，輕按兩下，鍵盤按下了，滑鼠移動了
事件源：元件。如：按鈕文本輸入框...
監聽器：代碼。
注冊監聽：将事件，事件源，監聽器結合在一起。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。

常見的事件

點選事件

onclick：單擊事件
ondblclick：輕按兩下事件

焦點事件

onblur：失去焦點
onfocus:元素獲得焦點。

加載事件

onload：一張頁面或一幅圖像完成加載。

滑鼠事件

onmousedown 滑鼠按鈕被按下。
onmouseup 滑鼠按鍵被松開。
onmousemove 滑鼠被移動。
onmouseover 滑鼠移到某元素之上。
onmouseout 滑鼠從某元素移開。

鍵盤事件

onkeydown 某個鍵盤按鍵被按下。
onkeyup 某個鍵盤按鍵被松開。
onkeypress 某個鍵盤按鍵被按下并松開。

選擇和改變

onchange 域的内容被改變。
onselect 文本被選中。

表單事件

onsubmit 确認按鈕被點選。
onreset 重置按鈕被點選。

事件簡單學習

功能：某些元件被執行了某些操作後，觸發某些代碼的執行。

造句： xxx被xxx,我就xxx

我方水晶被摧毀後，我就責備對友。

敵方水晶被摧毀後，我就誇獎自己。

如何綁定事件

直接在html标簽上，指定事件的屬性(操作)，屬性值就是js代碼
事件：onclick--- 單擊事件
通過js擷取元素對象，指定事件屬性，設定一個函數

代碼：

<body>
		<img id="light" src="img/off.gif"  onclick="fun();">
		<img id="light2" src="img/off.gif">
		
		<script>
			function fun(){
				alert('我被點了');
				alert('我又被點了');
			}
		
			function fun2(){
				alert('咋老點我？');
			}
		
			//1.擷取light2對象
			var light2 = document.getElementById("light2");
			//2.綁定事件
			light2.onclick = fun2;


			
		</script>
	</body>

案例1：電燈開關

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>電燈開關</title>

</head>
<body>

<img id="light" src="img/off.gif">

<script>
	/
		分析：
			1.擷取圖檔對象
			2.綁定單擊事件
			3.每次點選切換圖檔
				 規則：
					 如果燈是開的 on,切換圖檔為 off
					 如果燈是關的 off,切換圖檔為 on
				 使用标記flag來完成

	 /

	//1.擷取圖檔對象
	var light = document.getElementById("light");

	var flag = false;//代表燈是滅的。 off圖檔

	//2.綁定單擊事件
	light.onclick = function(){
		if(flag){//判斷如果燈是開的，則滅掉
			light.src = "img/off.gif";
			flag = false;

		}else{
			//如果燈是滅的，則打開

			light.src = "img/on.gif";
			flag = true;
		}


	
	}
	
</script>
</body>
</html>

效果如下：

深入JavaScript之BOM、DOM和事件BOMDOM事件監聽機制

BOM

概念

對象組成

Window：視窗對象

方法

與彈出框有關的方法

與打開關閉有關的方法

與定時器有關的方式

屬性

擷取其他BOM對象

擷取DOM對象

特點

Location：位址欄對象

建立(擷取)：

方法：

屬性

History：曆史記錄對象

建立(擷取)：

方法：

屬性

DOM

概念

W3C DOM 标準被分為 3 個不同的部分：

核心DOM模型

Document：文檔對象

建立(擷取)：在html dom模型中可以使用window對象來擷取

方法：

Element：元素對象

擷取/建立：通過document來擷取和建立

方法

Node：節點對象，其他5個的父對象

特點：所有dom對象都可以被認為是一個節點

方法

屬性

HTML DOM

事件監聽機制

概念

常見的事件

點選事件

焦點事件

加載事件

滑鼠事件

鍵盤事件

選擇和改變

表單事件

事件簡單學習

功能： 某些元件被執行了某些操作後，觸發某些代碼的執行。

如何綁定事件

案例1：電燈開關

繼續閱讀

功能：某些元件被執行了某些操作後，觸發某些代碼的執行。