當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

六、前端开发-JavaScript DOM

發布時間：2025/3/21 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了六、前端开发-JavaScript DOM 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

六、前端開發語言體系-JavaScript DOM

文章目錄

六、前端開發語言體系-JavaScript DOM
- JavaScript DOM
- - DOM簡介
  - DOM方法
  - DOM事件
  - DOM事件監聽器
  - DOM樣式和交互
  - DOM相關案例
- 參考文章

JavaScript DOM

DOM簡介

所謂DOM，全稱 Docuemnt Object Model 文檔對象模型。

在文檔中一切皆對象，比如html,body,div,p等等都看做對象。DOM 為文檔提供了結構化表示，并定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規范。

解析過程：HTML加載完成，渲染引擎會在內存中把html文檔，生成一個DOM樹，getElementById是獲取DOM上的元素節點。然后操作的時候修改的是該元素的屬性。

DOM方法

DOM 方法是你能夠（在 HTML 元素上）執行的動作，DOM 屬性是您能夠設置或改變的 HTML 元素的值。

<html> <body><p id="demo"></p><script> document.getElementById("demo").innerHTML = "Hello World!"; </script></body> </html> //在這個例子中，getElementById 是方法，使用 id="demo" 來查找元素 //而 innerHTML 是屬性，可用于獲取或替換 HTML 元素的內容。

查找 HTML 元素

方法描述

document.getElementById(id)	通過元素 id 來查找元素
document.getElementsByTagName(name)	通過標簽名來查找元素
document.getElementsByClassName(name)	通過類名來查找元素

改變 HTML 元素

方法描述

element.innerHTML = new html content	改變元素的 inner HTML
element.attribute = new value	改變 HTML 元素的屬性值
element.setAttribute(attribute, value)	改變 HTML 元素的屬性值
element.style.property = new style	改變 HTML 元素的樣式

添加和刪除元素

方法描述

document.createElement(element)	創建 HTML 元素
document.removeChild(element)	刪除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替換 HTML 元素
document.write(text)	寫入 HTML 輸出流

DOM事件

JS是事件驅動為核心的一門語言，事件三要素有：

事件源：引起后續事件的html標簽
事件：js已經定義好了，如onclick
事件驅動程序：對樣式和html的操作。也就是DOM

代碼書寫步驟如下：

獲取事件源：document.getElementById(“box”);

綁定事件：事件源box. 事件onclick和function( ){ 事件驅動程序 }

書寫事件驅動程序：關于DOM的操作

常用事件有：

事件名描述

onclick	鼠標單擊
ondblclick	鼠標雙擊
onkeyup	按下并釋放鍵盤上的一個鍵時觸發
onchange	文本內容或下拉菜單中的選項發生改變
onfocus	獲得焦點，表示文本框等獲得鼠標光標
onblur	失去焦點，表示文本框等失去鼠標光標
onmouseover	鼠標懸停，即鼠標停留在圖片等的上方
onmouseout	鼠標移出，即鼠標離開圖片等所在的區域
onload	網頁文檔加載事件
onunload	關閉網頁時
onsubmit	表單提交事件
onreset	重置表單時

綁定事件的方式：

直接綁定匿名函數

//綁定事件的第一種方式 var oDiv = document.getElementById("box"); oDiv.onclick = function(){alert("我是彈出的內容"); };

先單獨定義函數，再綁定

//綁定事件的第二種方式，分為行外綁定和行內綁定//行外綁定 var oDiv = document.getElementById("box");oDiv.onclick = fn; //注意，這里是fn，不是fn()//單獨定義函數function fn(){alert("我是彈出的內容") }//行內綁定 <div id="box" onclick="fn()"></div> //這里是fn()<script type="text/javascript">function fn() {alert("我是彈出的內容");} </script>

window.onload( )函數調用，是當頁面加載完畢(文檔和圖片的時候)時，文檔先加載，圖片資源后加載。

JS的加載是和html同步加載的。因此，如果使用元素再定義元素之前，容易報錯，這個時候，onload事件就能派上用場了，我們可以把使用元素的代碼凡在onload里面，就能保證這段代碼是最后執行的。

window.onload()方法存在的問題：

圖片加載完成才調用onload方法，如果現在用戶訪問JD商城頁面，如果JD商城中的腳本文件在window.onload()方法調用，如果此時用戶網速卡了，然后圖片資源加載失敗了，此時用戶是做不了任何操作的，所以winodw.onload()方法有很大問題。
window.onload()方法如果腳本中書寫兩個這樣的方法，那么會有事件覆蓋現象。

DOM事件監聽器

在 HTML DOM 中有兩種事件傳播的方法：冒泡和捕獲。

事件傳播是一種定義當發生事件時元素次序的方法。假如< div > 元素內有一個< p >，然后用戶點擊了這個< p >元素，應該首先處理哪個元素“click”事件？

在冒泡中，最內側元素的事件會首先被處理，然后是更外側的。首先處理< p >元素的點擊事件，然后是< div >元素的點擊事件。
在捕獲中，最外側元素的事件會首先被處理，然后是更內側的。首先處理< div >元素的點擊事件，然后是< p >元素的點擊事件。

為了能夠兼容更多的瀏覽器，建議多使用冒泡流。

DOM事件監聽有兩個方法：

addEventListener( ) 方法
removeEventListener( ) 方法

addEventListener( ) 方法為指定元素指定事件處理程序，該方法為元素附加事件處理程序而不會覆蓋已有的事件處理程序，我們能夠向一個元素添加多個事件處理程序。

addEventListener( ) 方法的語法為：

element.addEventListener(event, function, useCapture);第一個參數是事件的類型（比如 "click" 或 "mousedown"）。第二個參數是當事件發生時我們需要調用的函數。第三個參數是布爾值，指定使用事件冒泡還是事件捕獲。此參數是可選的。注意：請勿對事件使用 "on" 前綴；請使用 "click" 代替 "onclick"。

一個向相同元素添加不同類型事件的例子：

element.addEventListener("mouseover", myFunction); element.addEventListener("click", mySecondFunction);function myFunction() {alert ("Hello World!"); } function mySecondFunction() {alert ("This is JavaScript!"); }

addEventListener( ) 允許您將事件監聽器添加到任何 HTML DOM 對象上，比如 HTML 元素、HTML 對象、window 對象或其他支持事件的對象。

添加當用戶調整窗口大小時觸發的事件監聽器：

window.addEventListener("resize", function(){document.getElementById("demo").innerHTML = sometext; });

removeEventListener( ) 方法會刪除已通過 addEventListener() 方法附加的事件處理程序。

removeEventListener( ) 方法的語法為：

element.removeEventListener(event, function);第一個參數是事件的類型（比如 "click" 或 "mousedown"）。第二個參數是當事件發生時我們需要調用的函數。

實例：

element.removeEventListener("mousemove", myFunction);

IE 8、Opera 6.0 及其更早版本不支持 addEventListener( ) 和 removeEventListener( ) 方法。跨瀏覽器解決方案為：

var x = document.getElementById("myBtn"); if (x.addEventListener) { // 針對主流瀏覽器，除了 IE 8 及更正版本x.addEventListener("click", myFunction); } else if (x.attachEvent) { // 針對 IE 8 及更早版本x.attachEvent("onclick", myFunction); }

DOM樣式和交互

HTML DOM 允許 JavaScript 更改 HTML 元素的樣式。

樣式屬性的操作，就是對style 標簽中的屬性進行操作，并且通過js控制盒模型的屬性（width，height等），控制盒子的顯示隱藏（display：none|block），控制盒子的顏色切換（background：red|green）等。

<div id='box'></div> <script>window.onload = function(){//1.獲取事件源(事件對象，在文檔中一切的標簽都是對象)var oDiv = docuement.getElementById('box');//2.綁定事件oDiv.onclick = function(){//3.事件驅動程序 ps:記得所有的style中使用的像margin-left 在js操作時都是用marginLeft屬性進行賦值oDiv.style.backgroundColor = 'yellow'；}};</script>

值的操作，就是標簽中間的文本內容的設置和獲取。
- 雙閉合標簽：innerText 或者 innerHTML
- 單閉合標簽：除了img標簽，就剩input了，使用value進行賦值

<div id='box'></div> <input type='text' value = 'alex' id='user'> <script>window.onload = function(){//1.獲取事件源(事件對象，在文檔中一切的標簽都是對象)var oDiv = docuement.getElementById('box');var oInput = docuement.getElementById('user');//2.綁定事件oDiv.onclick = function(){//3.事件驅動程序 oDiv.innerText = 'alex'；//僅僅設置文本內容oDiv.innerHTML = '<h1>alex</h1>';//將標簽和文本內容一起解析};//2.綁定事件oInput.onclick = function(){//3.事件驅動程序只有有value屬性的才能使用value賦值和設置值oInput.value = 'wusir'；}};</script>

標簽屬性操作，就是對標簽中屬性的操作。比如像每個標簽中id，class，title，img。以及標簽中的src屬性和alt屬性、a標簽的href屬性、input標簽中的name、type屬性等等。

我們使用函數對節點進行操作。

創建節點
- 語法：新的標簽（元素節點） = document.createElement(“標簽名”);

插入節點
- 方式1：父親點的最后插入一個新的子節點。
- 方式1語法：父節點.appendChild(新的子節點);
- 方式2：在參考節點前插入一個新的節點。
- 方式2語法：父親點.insertBefore(作為參考的子節點)
刪除節點
- 語法：父節點.removeChild(子節點);

DOM相關案例

簡易留言板：

我們在文本框中輸入內容

點擊留言按鈕，會添加到當前頁面中。
點擊統計按鈕，會統計當前頁面中有多少條留言
點擊留言后面刪除按鈕（紅叉），會刪除當前留言

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>留言板</title><style type="text/css">*{padding: 0;margin: 0;}body{margin-left: 30%;margin-top: 2%;}h1{margin-left: 60px;}#msg{width: 300px;height: 120px;}#btn{width: 40px;height: 25px;}.close{display: inline-block;width: 20px;height: 20px;line-height: 20px;text-align: center;cursor: pointer;background-color: rgba(0,0,0,.1);margin-left: 20px;background-color: red;}</style></head><body><h1>簡易留言板</h1><textarea id="msg"></textarea><input type="button" id="btn" value="留言"/><button id="btn" onclick="sum()">統計</button><div id="box"></div></body><script type="text/javascript">// 0 將ul標簽添加到div#box標簽中var oUl = document.createElement('ul');var oBox = document.getElementById('box');oBox.appendChild(oUl);var oBtn = document.getElementById('btn');var oMsg = document.getElementById('msg')// 控制留言的總數量var count = 0;oBtn.onclick = function(){// 點擊留言按鈕事件操作// 1.創建li標簽var oLi = document.createElement('li'); //2.設置內容oLi.innerHTML = oMsg.value + "<span class='close'>X</span>"// 3.如果想在插入的第一個li獲取的前面繼續添加li標簽//3.1獲取li標簽var olis = document.getElementsByTagName('li');//3.2 如果是第一次添加的li標簽，則直接添加到ul的后面if(olis.length == 0){oUl.appendChild(oLi);count++;}else{// 3.3 如果不是第一次添加的li標簽，則插入到第一個li標簽的前面oUl.insertBefore(oLi,olis[0]);count++;}// 4.添加完成之后清空textarea的值oMsg.value = '';// 5.點擊X的時候刪除當前的一條數據//5.1先獲取所有的Xvar oSpans = document.getElementsByTagName('span');// 5.2for循環對所有的X添加點擊事件for(var i = 0; i< oSpans.length; i++){oSpans[i].onclick = function(){// 5.3 移除當前的li標簽oUl.removeChild(this.parentNode)count--;}}}function sum(){alert('一共發布了'+count+'條留言');}</script> </html>

參考文章

JavaScript-DOM（重點）

W3School-JavaScript HTML DOM

JavaScript中事件模型

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的六、前端开发-JavaScript DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：四、移动适配
下一篇：七、前端开发-JavaScript HT