JavaScript中BOM,DOM和事件怎么使用

這篇文章主要介紹“JavaScript中BOM,DOM和事件怎么使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“JavaScript中BOM,DOM和事件怎么使用”文章能幫助大家解決問題。

BOM

概念

BOM全稱Browser Object Model瀏覽器對(duì)象模型，將瀏覽器的各個(gè)組成部分封裝成對(duì)象。

對(duì)象組成

• Window：窗口對(duì)象

• Navigator：瀏覽器對(duì)象

• Screen：顯示器屏幕對(duì)象

• History：歷史記錄對(duì)象

• Location：地址欄對(duì)象

Window：窗口對(duì)象

方法

與彈出框有關(guān)的方法

alert() 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。 confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框。 如果用戶點(diǎn)擊確定按鈕，則方法返回true 如果用戶點(diǎn)擊取消按鈕，則方法返回false prompt() 顯示可提示用戶輸入的對(duì)話框。 返回值：獲取用戶輸入的值

與打開關(guān)閉有關(guān)的方法

close() 關(guān)閉瀏覽器窗口。 誰調(diào)用我 ，我關(guān)誰 open() 打開一個(gè)新的瀏覽器窗口 返回新的Window對(duì)象

與定時(shí)器有關(guān)的方式

setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。

參數(shù)：

• js代碼或者方法對(duì)象

• 毫秒值

返回值：唯一標(biāo)識(shí)，用于取消定時(shí)器

clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。 setInterval() 按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。 clearInterval() 取消由 setInterval() 設(shè)置的 timeout。

屬性

獲取其他BOM對(duì)象

history location Navigator Screen:

獲取DOM對(duì)象

document

特點(diǎn)

Window對(duì)象不需要?jiǎng)?chuàng)建可以直接使用 window使用。 window.方法名(); window引用可以省略。  方法名();

Location：地址欄對(duì)象

創(chuàng)建(獲取)：

window.location location

方法：

reload() 重新加載當(dāng)前文檔。刷新

屬性

href 設(shè)置或返回完整的 URL。

History：歷史記錄對(duì)象

創(chuàng)建(獲取)：

window.history history

方法：

back() 加載 history 列表中的前一個(gè) URL。 forward() 加載 history 列表中的下一個(gè) URL。 go(參數(shù)) 加載 history 列表中的某個(gè)具體頁面。

參數(shù)：

正數(shù)：前進(jìn)幾個(gè)歷史記錄 負(fù)數(shù)：后退幾個(gè)歷史記錄

屬性

length 返回當(dāng)前窗口歷史列表中的 URL 數(shù)量。

DOM

概念

DOM全稱Document Object Model 文檔對(duì)象模型，將標(biāo)記語言文檔的各個(gè)組成部分，封裝為對(duì)象?？梢允褂眠@些對(duì)象，對(duì)標(biāo)記語言文檔進(jìn)行CRUD的動(dòng)態(tài)操作。

W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分

1.核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型

Document：文檔對(duì)象 Element：元素對(duì)象 Attribute：屬性對(duì)象 Text：文本對(duì)象 Comment:注釋對(duì)象 Node：節(jié)點(diǎn)對(duì)象，其他5個(gè)的父對(duì)象

2.XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型

3.HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型

核心DOM模型

Document：文檔對(duì)象

創(chuàng)建(獲取)：在html dom模型中可以使用window對(duì)象來獲取

1. window.document

2. document

方法：

1.獲取Element對(duì)象：

• getElementById() ： 根據(jù)id屬性值獲取元素對(duì)象。id屬性值一般唯一

• getElementsByTagName()：根據(jù)元素名稱獲取元素對(duì)象們。返回值是一個(gè)數(shù)組

• getElementsByClassName():根據(jù)Class屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組

• getElementsByName(): 根據(jù)name屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組

2.創(chuàng)建其他DOM對(duì)象：

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

Element：元素對(duì)象

獲取/創(chuàng)建：通過document來獲取和創(chuàng)建

方法

1. removeAttribute()：刪除屬性

2. setAttribute()：設(shè)置屬性

Node：節(jié)點(diǎn)對(duì)象，其他5個(gè)的父對(duì)象

特點(diǎn)：所有dom對(duì)象都可以被認(rèn)為是一個(gè)節(jié)點(diǎn)

方法

 CRUD dom樹：

appendChild()：向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的結(jié)尾添加新的子節(jié)點(diǎn)。

removeChild()    ：刪除（并返回）當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)。

replaceChild()：用新節(jié)點(diǎn)替換一個(gè)子節(jié)點(diǎn)。

屬性

parentNode 返回節(jié)點(diǎn)的父節(jié)點(diǎn)。

HTML DOM

• 標(biāo)簽體的設(shè)置和獲?。篿nnerHTML

• 使用html元素對(duì)象的屬性

• 控制元素樣式

使用元素的style屬性來設(shè)置

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

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

事件監(jiān)聽機(jī)制

概念

概念：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。

• 事件：某些操作。如： 單擊，雙擊，鍵盤按下了，鼠標(biāo)移動(dòng)了

• 事件源：組件。如： 按鈕 文本輸入框...

• 監(jiān)聽器：代碼。

• 注冊(cè)監(jiān)聽：將事件，事件源，監(jiān)聽器結(jié)合在一起。 當(dāng)事件源上發(fā)生了某個(gè)事件，則觸發(fā)執(zhí)行某個(gè)監(jiān)聽器代碼。

常見的事件

點(diǎn)擊事件

onclick：單擊事件

ondblclick：雙擊事件

焦點(diǎn)事件

onblur：失去焦點(diǎn)

onfocus:元素獲得焦點(diǎn)。

加載事件

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

鼠標(biāo)事件

• onmousedown 鼠標(biāo)按鈕被按下。

• onmouseup 鼠標(biāo)按鍵被松開。

• onmousemove 鼠標(biāo)被移動(dòng)。

• onmouseover 鼠標(biāo)移到某元素之上。

• onmouseout 鼠標(biāo)從某元素移開。

鍵盤事件

• onkeydown 某個(gè)鍵盤按鍵被按下。

• onkeyup 某個(gè)鍵盤按鍵被松開。

• onkeypress 某個(gè)鍵盤按鍵被按下并松開。

選擇和改變

• onchange 域的內(nèi)容被改變。

• onselect 文本被選中。

表單事件

• onsubmit 確認(rèn)按鈕被點(diǎn)擊。

• onreset 重置按鈕被點(diǎn)擊。

事件簡單學(xué)習(xí)

功能： 某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。

造句：  xxx被xxx,我就xxx 我方水晶被摧毀后，我就責(zé)備對(duì)友。 敵方水晶被摧毀后，我就夸獎(jiǎng)自己。

如何綁定事件

• 直接在html標(biāo)簽上，指定事件的屬性(操作)，屬性值就是js代碼

• 事件：onclick--- 單擊事件

• 通過js獲取元素對(duì)象，指定事件屬性，設(shè)置一個(gè)函數(shù)

代碼：

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


			
		</script>
	</body>

案例1：電燈開關(guān)

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

</head>
<body>

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

<script>
	/
		分析：
			1.獲取圖片對(duì)象
			2.綁定單擊事件
			3.每次點(diǎn)擊切換圖片
				 規(guī)則：
					 如果燈是開的 on,切換圖片為 off
					 如果燈是關(guān)的 off,切換圖片為 on
				 使用標(biāo)記flag來完成

	 /

	//1.獲取圖片對(duì)象
	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>

效果如下：

關(guān)于“JavaScript中BOM,DOM和事件怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。