JS HTML DOM (文檔對(duì)象模型)

DOM簡(jiǎn)介

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

    1. 改變頁(yè)面中的所有HTML元素。
    2. 改變頁(yè)面中的所有HTML屬性。
    3. 改變頁(yè)面中的所有CSS樣式。
    4. 對(duì)頁(yè)面中的所有事件作出反應(yīng)。

DOM HTML

獲得HTML屬性的三種方式

  • 通過(guò)id查找HTML元素
    <script>
    x=document.getElementById("intro");
    document.write("<p>文本來(lái)自 id 為 intro 段落: "    + x.innerHTML + "</p>");
    </script>
  • 通過(guò)標(biāo)簽名找到元素
    <script>
    //查找id為main的元素
    var x=document.getElementById("main");
    //查找該元素中所有<p>元素，返回的為一個(gè)數(shù)組
    var y=x.getElementsByTagName("p");
    document.write('id="main"元素中的第一個(gè)段落為：' + y[0].innerHTML);
    </script>
  • 通過(guò)類名查找元素
    <script>
x=document.getElementsByClassName("intro");
document.write("<p>文本來(lái)自 class 為 intro 段落: " + x[0].innerHTML + "</p>");
</script>

改變HTML輸出流

  • js能夠創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容，比如動(dòng)態(tài)獲取當(dāng)前時(shí)間等
  • 使用document.write()可用于直接向HTML輸出流寫(xiě)內(nèi)容
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

改變HTML內(nèi)容

  • 修改HTML內(nèi)容最簡(jiǎn)單的方法是使用innerHTML屬性
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

改變HTML屬性

  • 改變HTML屬性可以套用以下模板
    document.getElementById(id).attribute=新屬性值
  • 使用實(shí)例如下
<script>
//改變img的src屬性
document.getElementById("image").src="landscape.jpg";
</script>

改變HTML樣式

  • 改變HTML樣式可以使用以下語(yǔ)法
document.getElementById(id).style.property=新樣式
  • 使用實(shí)例
    <script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

HTML事件

HTML事件類型

  • HTML有諸如以下幾種事件類型
  1. 當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
  1. 當(dāng)網(wǎng)頁(yè)已加載時(shí)
  2. 當(dāng)圖像已加載時(shí)
  3. 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
  4. 當(dāng)輸入字段被改變時(shí)
  5. 當(dāng)提交HTML表單時(shí)
  6. 當(dāng)用戶觸發(fā)按鍵時(shí)
  7. ...
  8. ..

HTML事件屬性

  • 如需監(jiān)聽(tīng)HTML元素的事件，可以使用事件屬性進(jìn)行分配
    //監(jiān)聽(tīng)button元素的onClick事件
    <button onclick="displayDate()">點(diǎn)這里</button>

使用HTML DOM來(lái)分配事件

  • HTML DOM允許使用js來(lái)向HTML元素分配事件
<script>
//向button元素分配onClick事件
//并將displayDate函數(shù)分配給id=“myBtn”的HTML元素
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload和onunload事件

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

onchange事件

  • onchange事件常結(jié)合對(duì)輸入字段的驗(yàn)證來(lái)使用
    //當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，調(diào)用upperCase()函數(shù)
    <input type="text" id="fname" onchange="upperCase()">

onmouseover和onmouseout事件

  • onmouseover和onmouseout事件可用于在用戶的鼠標(biāo)移至HTML元素上方或移出元素時(shí)出發(fā)函數(shù)
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

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)聽(tīng)
2. 一個(gè)元素可以添加多個(gè)監(jiān)聽(tīng)事件
3. 可以向同個(gè)元素添加多個(gè)同類型的監(jiān)聽(tīng)事件，比如：兩個(gè)onclick事件。
4. 可以向任何DOM對(duì)象添加事件監(jiān)聽(tīng)，不僅僅是HTML元素，比如：window對(duì)象。
5. 可以更簡(jiǎn)單的控制事件（冒泡與捕獲）
6. 使用addEventListener()方法時(shí)，javascript從HTML標(biāo)記中分離開(kāi)來(lái)，可讀性更強(qiáng)，在沒(méi)有控制HTML標(biāo)記時(shí)也可以添加事件監(jiān)聽(tīng)。
7. 可以使用removeEventListener()方法來(lái)移除事件的監(jiān)聽(tīng)。

語(yǔ)法

    //第一個(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)聽(tīng)事件
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ù)名，來(lái)引用外部函數(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)聽(tīng)。HTML DOM對(duì)象如： HTML元素，HTML文檔，window對(duì)象，或者其他支出的事件對(duì)象如： xmlHttpRequest對(duì)象。
   //當(dāng)用戶重置窗口大小時(shí)添加事件監(jiān)聽(tīng)
   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);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容