DOM簡(jiǎn)介

當(dāng)網(wǎng)頁(yè)加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型(DOM)。通過DOM，JS可以對(duì)HTML實(shí)現(xiàn)以下操作：

改變頁(yè)面中的所有HTML元素。

改變頁(yè)面中的所有HTML屬性。

改變頁(yè)面中的所有CSS樣式。

對(duì)頁(yè)面中的所有事件作出反應(yīng)。

DOM HTML

獲得HTML屬性的三種方式

通過id查找HTML元素

x=document.getElementById("intro");

document.write("

文本來自 id 為 intro 段落: " + x.innerHTML + "

");

通過標(biāo)簽名找到元素

//查找id為main的元素

var x=document.getElementById("main");

//查找該元素中所有

元素，返回的為一個(gè)數(shù)組

var y=x.getElementsByTagName("p");

document.write('id="main"元素中的第一個(gè)段落為：' + y[0].innerHTML);

通過類名查找元素

x=document.getElementsByClassName("intro");

document.write("

文本來自 class 為 intro 段落: " + x[0].innerHTML + "

");

改變HTML輸出流

js能夠創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容，比如動(dòng)態(tài)獲取當(dāng)前時(shí)間等

使用document.write()可用于直接向HTML輸出流寫內(nèi)容

document.write(Date());

改變HTML內(nèi)容

修改HTML內(nèi)容最簡(jiǎn)單的方法是使用innerHTML屬性

document.getElementById("p1").innerHTML="新文本!";

改變HTML屬性

改變HTML屬性可以套用以下模板

document.getElementById(id).attribute=新屬性值

使用實(shí)例如下

//改變img的src屬性

document.getElementById("image").src="landscape.jpg";

改變HTML樣式

改變HTML樣式可以使用以下語法

document.getElementById(id).style.property=新樣式

使用實(shí)例

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

HTML事件

HTML事件類型

HTML有諸如以下幾種事件類型

當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)

當(dāng)網(wǎng)頁(yè)已加載時(shí)

當(dāng)圖像已加載時(shí)

當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)

當(dāng)輸入字段被改變時(shí)

當(dāng)提交HTML表單時(shí)

當(dāng)用戶觸發(fā)按鍵時(shí)

...

..

HTML事件屬性

如需監(jiān)聽HTML元素的事件，可以使用事件屬性進(jìn)行分配

//監(jiān)聽button元素的onClick事件

點(diǎn)這里

使用HTML DOM來分配事件

HTML DOM允許使用js來向HTML元素分配事件

//向button元素分配onClick事件

//并將displayDate函數(shù)分配給id=“myBtn”的HTML元素

document.getElementById("myBtn").οnclick=function(){displayDate()};

onload和onunload事件

onload和onunload會(huì)在用戶進(jìn)入或離開頁(yè)面時(shí)被觸發(fā)，可用于檢測(cè)訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁(yè)的正確版本。也可用于處理cookie

//

onchange事件

onchange事件常結(jié)合對(duì)輸入字段的驗(yàn)證來使用

//當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，調(diào)用upperCase()函數(shù)

onmouseover和onmouseout事件

onmouseover和onmouseout事件可用于在用戶的鼠標(biāo)移至HTML元素上方或移出元素時(shí)出發(fā)函數(shù)

Mouse Over Me

function mOver(obj){

obj.innerHTML="Thank You"

}

function mOut(obj){

obj.innerHTML="Mouse Over Me"

}

onmouseDown、onmouseup、以及onclick事件

這三個(gè)事件構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分、當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)，會(huì)出發(fā)onmousedown事件，當(dāng)釋放鼠標(biāo)時(shí)會(huì)觸發(fā)onmouseup事件，最后，當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí)，會(huì)觸發(fā)onclick事件。

DOM EventListener

addEventListener()方法

用處

1. 用于向元素添加事件監(jiān)聽

2. 一個(gè)元素可以添加多個(gè)監(jiān)聽事件

3. 可以向同個(gè)元素添加多個(gè)同類型的監(jiān)聽事件，比如：兩個(gè)onclick事件。

4. 可以向任何DOM對(duì)象添加事件監(jiān)聽，不僅僅是HTML元素，比如：window對(duì)象。

5. 可以更簡(jiǎn)單的控制事件(冒泡與捕獲)

6. 使用addEventListener()方法時(shí)，javascript從HTML標(biāo)記中分離開來，可讀性更強(qiáng)，在沒有控制HTML標(biāo)記時(shí)也可以添加事件監(jiān)聽。

7. 可以使用removeEventListener()方法來移除事件的監(jiān)聽。

語法

//第一個(gè)參數(shù)是事件類型(如click或mousedown)

//第二個(gè)參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)

//第三個(gè)參數(shù)是布爾值，用于描述事件是冒泡還是捕獲。該參數(shù)是可選的，默認(rèn)為false，冒泡傳遞

element.addEventListener(event, function, useCapture);

實(shí)例

//當(dāng)用戶點(diǎn)擊按鈕時(shí)觸發(fā)監(jiān)聽事件

document.getElementById("myBtn").addEventListener("click", displayDate);

向原元素添加事件句柄

實(shí)例1: 當(dāng)用戶點(diǎn)擊元素時(shí)彈出“hello world”

element.addEventListener("click", function(){ alert("Hello World!"); });

實(shí)例2: 使用函數(shù)名，來引用外部函數(shù)

//當(dāng)用戶點(diǎn)擊元素時(shí)彈出helloworld

element.addEventListener("click", myFunction);

function myFunction() {

alert ("Hello World!");

}

向同一元素添加多個(gè)事件句柄

向同個(gè)元素添加多個(gè)同種類型事件,注： 不會(huì)覆蓋已存在的事件

element.addEventListener("click", myFunction);

element.addEventListener("click", mySecondFunction);

向同個(gè)元素添加多個(gè)不同類型事件

element.addEventListener("mouseover", myFunction);

element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseout", myThirdFunction);

向window對(duì)象添加事件句柄

addEventListener()方法允許向HTML DOM對(duì)象添加事件監(jiān)聽。HTML DOM對(duì)象如： HTML元素，HTML文檔，window對(duì)象，或者其他支出的事件對(duì)象如： xmlHttpRequest對(duì)象。

//當(dāng)用戶重置窗口大小時(shí)添加事件監(jiān)聽

window.addEventListener("resize", function(){

document.getElementById("demo").innerHTML = sometext;

});

傳遞參數(shù)

當(dāng)傳遞參數(shù)時(shí)，使用“匿名函數(shù)”調(diào)用帶參數(shù)的函數(shù)

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件的冒泡傳遞和捕獲傳遞

事件傳遞有兩種方式： 冒泡或捕獲，這兩種事件傳遞定義了元素事件觸發(fā)的順序。

比如： p元素插入到 div 元素中，用戶點(diǎn)擊 p 元素, 哪個(gè)元素的 "click" 事件先被觸發(fā)呢？

在冒泡傳遞中內(nèi)部事件會(huì)先被觸發(fā)，然后再觸發(fā)外部元素。

在捕獲傳遞中外部元素事件會(huì)先被觸發(fā)，然后才會(huì)觸發(fā)內(nèi)部元素的事件

removeEventListener()方法

removeEventListener()方法移除由addEventListener()方法添加事件的句柄。

element.removeEventListener("mousemove", myFunction);

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html中js方法中如何传递本元素对象,JS HTML DOM (文档对象模型)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。