DOM基礎學習

一、DOM文檔對象模型

通常將DOM看作一顆“樹”，DOM將整個文檔看作一顆“家譜樹 ”

二、對象

  1. 用戶定義的對象
  2. 內建對象（Array、Date、Math）
  3. 宿主對象

三、節點 node

  1. 元素節點（element node）
  2. 文本節點（text node）
  3. 屬性節點
    獲取元素節點的方式
<div id="classList"></div>
<ul><li class="item"></li><li class="item"></li><li></li>
</ul>

//獲取元素節點的方式
//1.document.getElementById()
let eleNode = document.getElementById("classList") //單個對象
console.log(eleNode)
//2.document.getElementsByTagName()
let olis = document.getElementsByTagName("li") //獲取出來的是一個節點對象的集合，像數組（但實際并不是數組，不可以使用數組方法 ） 
console.log(olis)
//3.document.getElementsByClassName() 
let item = document.getElementsByClassName("item") //獲取出來的是一個節點對象的集合
console.log(item)

1. getAttribute和setAttribute

a. getAttribute獲取屬性值，有一個必須的參數，這個節點對象的名字

<p title="你好">請選擇序號</p>

   var oP = document.getElementsByTagName('p')[0]//獲取屬性值 有一個必須的參數，這個節點對象的名字var title = oP.getAttribute("title");var className = oP.getAttribute("class");console.log(title) //你好console.log(className) //null 不存在

b. 設置屬性值setAttribute(name,value)

<p title="你好">請選擇序號</p>

  #box {color: red;}

//獲取元素的節點
var oP = document.getElementsByTagName('p')[0]
//設置屬性值setAttribute(name,value)
oP.setAttribute("id", "box")

3.節點對象的屬性

3.1三個重要屬性

在文檔對象模型（DOM）中，每一個節點都是一個對象。DOM節點有三個重要屬性：

  1. nodeName : 節點的名稱 只讀
    ● 元素節點的nodeName與標簽相同
    ● 屬性節點的nodeName與屬性名稱相同
    ● 文本節點的nodeName永遠是#text
    ● 文檔節點的nodeNamenodeName永遠是#document
  2. nodeValue : 節點的值
    ● 元素節點的nodeValue是undefined或null
    ● 文本節點的nodeValue是文本自身
    ● 屬性節點的nodeValue是屬性的值
  3. nodeType ：節點的類型 只讀
    以下常用的幾種節點類型：
    在這里插入圖片描述
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="box" title="我是文本">我是一個文本節點<!-- 這是注釋 --></div><script>//元素節點var oDiv = document.getElementById("box")console.log(oDiv.nodeName) //DIVconsole.log(oDiv.nodeValue) //nullconsole.log(oDiv.nodeType) //1//獲取屬性節點console.log(oDiv.attributes);var attrNode = oDiv.attributes[0];console.log(attrNode.nodeName)console.log(attrNode.nodeValue)console.log(attrNode.nodeType)//獲取文本節點var textNode = oDiv.childNodes[0]console.log(textNode.nodeName)console.log(textNode.nodeValue)console.log(textNode.nodeType)//注釋節點console.log(oDiv.childNodes)var commentNOde = oDiv.childNodes[1]console.log(commentNOde.nodeName)console.log(commentNOde.nodeValue)console.log(commentNOde.nodeType)//文檔節點console.log(document.nodeType);  //9</script>
</body></html>

3.2其他屬性

  1. childNodes 獲取其子節點
  2. firstChild 獲取第一個子節點
  3. lastChild 獲取最后一個子節點
  4. parentNode 獲取父級子節點
  5. nextSibling 獲取下一個兄弟元素節點
  6. previousSibling 獲取上一個兄弟元素節點
3.2.1childNodes

此屬性用于獲取其子節點

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);</script>
</body></html>

打印的結果如下，這時候發現本來我們的father盒子中只有兩個p標簽，為什么會多出text,這個text是什么？
在這里插入圖片描述

我們來打印以下他的節點類型，看一下text是什么類型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3</script>
</body></html>

打印結果是3，對應上面所說的文本節點,顯而易見我們并沒有寫文本，那是因為我們標簽之間有空格，空格也屬于文本類型。如果我們不想要這個文本節點，那么就將代碼寫成一行就可以了。
在這里插入圖片描述

但是如果我們的代碼都寫成一行，這樣會導致代碼結構不清晰。

 <div id="father"><p>你好！js</p><p>你好！Html</p></div>

那么下面我們來處理一下元素之間有空格的問題，這里我們來封裝一個函數來處理一下:

節點對象在各個瀏覽器兼容性處理：

在此函數當中判斷拿到的節點是否是元素節點，如果是那么就添加到新數組中，將新數組返回。

function get_childNodes(fatherNode) {let nodes = fatherNode.childNodes;let arr = [];for (let i = 0; i < nodes.length; i++) {if (nodes[i].nodeType === 1) {arr.push(nodes[i])}}return arr;
}
let childNodes = get_childNodes(oFather)
console.log(childNodes)
3.2.2 firstChild 子節點中的第一個節點
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等價于console.log(oFather.childNodes[0])</script>
</body></html>
3.2.3 lastChild子節點中的最后一個節點
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等價于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等價于console.log(oFather.childNodes[oFather.childNodes.length-1])</script>
</body></html>
3.2.4 parentNode 獲取元素節點的父節點
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等價于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等價于console.log(oFather.childNodes[oFather.childNodes.length-1])console.log(oFather.parentNode) //獲取oFather.parentNode的父級元素</script>
</body></html>

在這里就是獲取father這個節點的父節點，也就是body這個元素節點。

3.2.5 nextSibling 獲取下一個兄弟元素節點
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><div class="next">下一個兄弟元素</div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等價于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等價于console.log(oFather.childNodes[oFather.childNodes.length-1])console.log(oFather.parentNode) //獲取oFather.parentNode的父級元素console.log(oFather.nextSibling);//獲取下一個兄弟元素</script>
</body></html>

注意，這里兄弟元素之間同樣不能有空格,否則獲取出來的是text,文本節點。
同樣的這里我們也可以通過封裝函數來處理此問題：
首先將獲取到的father作為參數傳入，后判斷節點類型是否是元素節點，否則將一直查找，直到查找到的元素節點類型為1停止。（同樣的previousSibling也可以使用此函數，只需要將屬性改為previousSibling即可）

  function get_nextSilbling(n) {let x = n.nextSibling;while (x && x.nodeType != 1) {x = x.nextSibling;}return x;}
console.log(get_nextSilbling(oFather))
3.2.6 previousSibling 獲取上一個兄弟元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div>上一個兄弟元素</div><div id="father"><p>你好！js</p><p>你好！Html</p></div><div class="next">下一個兄弟元素</div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等價于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等價于console.log(oFather.childNodes[oFather.childNodes.length-1])console.log(oFather.parentNode) //獲取oFather.parentNode的父級元素console.log(oFather.nextSibling);//獲取下一個兄弟元素console.log(oFather.previousSibling);//獲取上一個兄弟元素</script>
</body></html>

這里與nextSibling獲取下一個兄弟節點的屬性相同，不能有空格。

4. 節點的方法

4.1 創建節點createElement()

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let newNode = document.createElement("p");//創建一個p標簽</script>
</body></html>

4.2 插入節點appendChild()

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//創建一個p標簽oDiv.appendChild(newNode);//將新創建的節點插入到div當中</script>
</body></html>

這樣就可以看到使用appendChild()方法可以將新創建的節點插入到div中，在已有元素后
在這里插入圖片描述

但是現在還沒有內容，這時候我們就可以使用creatTextNode()方法來創建文本節點。

4.3 創建文本節點creatTextNode()

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//創建一個p標簽oDiv.appendChild(newNode);//將新創建的節點插入到div當中let textNode=document.createTextNode("我是文本節點的內容")newNode.appendChild(textNode); //將文本節點插入到新創建的節點當中</script>
</body></html>

在這里插入圖片描述

這個有助于理解，平常我們不使用這兩種方法，而是使用innerHTML這個屬性用于向節點當中插入內容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//創建一個p標簽oDiv.appendChild(newNode);//將新創建的節點插入到div當中// let textNode=document.createTextNode("我是文本節點的內容")// newNode.appendChild(textNode); //將文本節點插入到新創建的節點當中// newNode.innerHTML = '<a href='#'>我是文本節點的內容</a>';//可以插入文本，也可以插入標簽newNode.innerText =	'<a href='#'>我是文本節點的內容</a>';//此方法不可以渲染標簽</script>
</body></html>

在這里插入圖片描述

在這里雖然我們已經使用了newNode這個對象，但實際還在內存當中，我們可以將其釋放

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//創建一個p標簽oDiv.appendChild(newNode);//將新創建的節點插入到div當中// let textNode=document.createTextNode("我是文本節點的內容")// newNode.appendChild(textNode); //將文本節點插入到新創建的節點當中// newNode.innerHTML = '<a href='#'>我是文本節點的內容</a>';//可以插入文本，也可以插入標簽newNode.innerText =	'<a href='#'>我是文本節點的內容</a>';//此方法不可以渲染標簽newNode = null; //釋放對象</script>
</body></html>

4.4 在指定元素之前插入節點 insertBefore(newNode,node)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let oP =document.querySelector(".active");let newNode = document.createElement("p");//創建一個p標簽let newNode2  = document.createElement("p");//第一個參數是插入的節點，第二個參數參考的節點oDiv.insertBefore(newNode2,oP)oDiv.appendChild(newNode);//將新創建的節點插入到div當中// let textNode=document.createTextNode("我是文本節點的內容")// newNode.appendChild(textNode); //將文本節點插入到新創建的節點當中// newNode.innerHTML = '<a href="#">我是文本節點的內容</a>';//可以插入文本，也可以插入標簽newNode.innerText =	'<a href="#">我是文本節點的內容</a>';//此方法不可以渲染標簽newNode = null; //釋放對象，注意釋放對象一定要在其使用完畢之后再進行釋放newNode2.innerHTML = "<a href='#'>我是在節點之前創建的文本節點的內容</a>"</script>
</body></html>

在這里插入圖片描述

4.5 刪除節點removeChild(childNode)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let oP = document.querySelector(".active");let newNode = document.createElement("p");//創建一個p標簽let newNode2 = document.createElement("p");//第一個參數是插入的節點，第二個參數參考的節點oDiv.insertBefore(newNode2, oP)oDiv.appendChild(newNode);//將新創建的節點插入到div當中// let textNode=document.createTextNode("我是文本節點的內容")// newNode.appendChild(textNode); //將文本節點插入到新創建的節點當中// newNode.innerHTML = '<a href='#'>我是文本節點的內容</a>';//可以插入文本，也可以插入標簽newNode.innerText = '<a href="#">我是文本節點的內容</a>';//此方法不可以渲染標簽newNode = null; //釋放對象，注意釋放對象一定要在其使用完畢之后再進行釋放newNode2.innerHTML = "<a href='#'>我是在節點之前創建的文本節點的內容</a>"oDiv.removeChild(oP)</script>
</body></html>

在這里插入圖片描述

4.6 替換節點replaceChild(newNode,node)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let oP = document.querySelector(".active");let newNode = document.createElement("p");//創建一個p標簽let newNode2 = document.createElement("p");let newNode3 = document.createElement("a") //創建一個a標簽newNode3.setAttribute("href", "https://www.baidu.com") //設置a標簽的屬性newNode3.innerHTML = "百度一下" //設置a標簽的內容//第一個參數是插入的節點，第二個參數參考的節點oDiv.insertBefore(newNode2, oP)oDiv.appendChild(newNode);//將新創建的節點插入到div當中oDiv.replaceChild(newNode3, oP)// let textNode=document.createTextNode("我是文本節點的內容")// newNode.appendChild(textNode); //將文本節點插入到新創建的節點當中// newNode.innerHTML = '<a href='#'>我是文本節點的內容</a>';//可以插入文本，也可以插入標簽newNode.innerText = '<a href="#">我是文本節點的內容</a>';//此方法不可以渲染標簽newNode = null; //釋放對象，注意釋放對象一定要在其使用完畢之后再進行釋放newNode2.innerHTML = "<a href='#'>我是在節點之前創建的文本節點的內容</a>"// oDiv.removeChild(oP)</script>
</body></html>

在這里插入圖片描述

四、動態操作樣式

1.直接操作樣式屬性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p id="box">張三</p><script type="text/javascript">//nodeObj.stylelet oP = document.getElementById("box");console.log(oP.style) //1. 直接操作樣式屬性oP.style.color = "red";oP.style.backgroundColor = 'black';oP.style.width = "250px";oP.style.height = "250px";</script>
</body></html>

獲取對應的節點對象上的屬性,調用style屬性時會將添加的屬性添加到行內
在這里插入圖片描述

2.通過控制屬性的類名來控制樣式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {width: 250px;height: 150px;color: red;background: black;}</style>
</head><body><p id="box">張三</p><script type="text/javascript">//nodeObj.stylelet oP = document.getElementById("box");//2. 通過控制屬性的類名來控制樣式oP.setAttribute("class", "active")</script>
</body></html>

五、事件

在這里插入圖片描述

1. onclick事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 100px;height: 100px;background-color: aqua;}</style>
</head><body><div id="box" onclick="active()"></div><script>let box = document.getElementById("box");//1.操作DOM元素// box.onclick = function () {// this指向了當前的元素節點對象//     alert("事件被觸發了");// }//2.在元素上添加事件function active(){//this指向了當前元素的元素節點對象// this.style.backgroundColor = 'red'box.style.backgroundColor = 'red'}</script>
</body></html>

2.onmouseover()和onmouseout()事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 100px;height: 100px;background-color: aqua;}</style>
</head><body><div id="box"></div><script>let box = document.getElementById("box");// 鼠標滑過事件box.onmouseover = function () {this.style.backgroundColor = "green"}// 鼠標移開事件box.onmouseout = function () {this.style.backgroundColor = "aqua"}</script>
</body></html>

3. 表單控件上的事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {color: red;font-size: 12px;}</style>
</head><body><form action=""><p class="name"><label for="username">用戶名:</label><input type="text" name="user" id="username"></p><p class="pwd"><label for="pwd">密碼：</label><input type="password" name="pwd" id="pwd"></p><input type="submit" name=""></form><script>let userName = document.getElementById("username");let newNOde = document.createElement("span");// 表單聚焦事件userName.onfocus = function () {// console.log("請輸入用戶名")newNOde.innerHTML = "請輸入用戶名";newNOde.setAttribute("class", "active")userName.parentNode.appendChild(newNOde);}// 表單失焦事件userName.onblur = function () {// console.log("請輸入用戶名")newNOde.innerHTML = "請輸入正確的用戶名";newNOde.setAttribute("class", "active")userName.parentNode.appendChild(newNOde);}</script>
</body></html>

4. 內容的選中事件與內容改變事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><textarea cols="30" rows="10" name="" id="">請寫入個人簡介，不少于200字</textarea><input type="text" value="123"><script>let text = document.getElementsByTagName("textarea")[0];let ipt = document.getElementsByTagName("input")[0];// 內容選中事件text.onselect = function () {console.log("內容被選中")}// 內容改變事件ipt.onchange = function () {console.log("內容被改變了")}// input框內容改變事件ipt.oninput = function () {console.log("內容被實時的改變了")// 實時監聽input中的內容console.log(this.value)}</script>
</body></html>

5. 窗口加載事件

在之前我們一直將script代碼寫在body當中，如果將代碼寫在head標簽當中會怎么樣？
下面的代碼是將script標簽寫在body標簽當中，給box盒子添加了一個點擊事件。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="box">你好！</div><script>let box = document.getElementById("box")box.onclick = function () {this.innerHTML = "javaScript!"}</script>
</body></html>

在這次的代碼中，將script代碼寫進head標簽當中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}</script>
</head><body><div id="box">你好！</div>
</body></html>

此時我們就會發現，放進head標簽當中的js代碼報錯了，打印了我們拿到的DOM元素顯示為null。也就是拿到的DOM元素有誤。
原因如下：

  1. 腳本在 中執行時，文檔的 DOM 結構還沒有加載完成
  2. document.getElementById(“box”) 試圖獲取 ID 為 “box” 的元素，但此時
    還沒有被瀏覽器解析和創建
  3. 因此 box 變量會是 null，后續對 null 調用 onclick 就會導致錯誤
    在這里插入圖片描述

解決方案：
通過設置延時器，等待DOM結構加載：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>setTimeout(function () {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}}, 0)</script>
</head><body><div id="box">你好！</div>
</body></html>

上面的代碼當中，我們設置了延時時間為0，同樣的也可以設置為2000毫秒，1000毫秒，那么具體要設置為多少，這里我們并不清楚，這時候就可以使用窗口加載事件，等待DOM元素加載完成以后再執行我們的js代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 等待文檔加載完成之后才會調用onload()window.onload = function () {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}}</script>
</head><body><div id="box">你好！</div>
</body></html>

但是使用onload()方法有一個弊端就是，onload()方法會覆蓋之前的事件,例如下面的代碼，在重新調用onload方法時，之前的代碼不會再次執行。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 等待文檔加載完成之后才會調用onload()window.onload = function () {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}}// window.onload 會有覆蓋行為，之前的代碼不會執行window.onload = function () {console.log("111")}</script>
</head><body><div id="box">你好！</div>
</body></html>

6. DOMContentLoaded事件

上面代碼中我們使用窗口加載事件，使放在head標簽當中的代碼可以正常運行，這里我們可以使用DOMContentLoaded事件，使代碼可以正常運行。DOMContentLoaded 是瀏覽器提供的一個事件，它會在 HTML 文檔完全解析（DOM 樹構建完成） 時觸發，而無需等待樣式表、圖片等外部資源加載完成。

<head><script>document.addEventListener("DOMContentLoaded", function() {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}});</script>
</head>

在這里插入圖片描述

六、結束語

本節關于DOM的學習就到此結束了，后續我們會繼續學習一下BOM。最后不要忘記點贊加關注哦~

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/81914.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/81914.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/81914.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

初識人工智能、機器學習、深度學習和大模型

初識人工智能、機器學習、深度學習和大模型

文章目錄 1. 前言2. 相關概念3. 層級關系4. 應用場景對比4. 實際案例 初識人工智能、機器學習、深度學習和大模型 1. 前言 之前經常聽人說AI、機器學習&#xff0c;深度學習之類的詞匯&#xff0c;總是傻傻的不了解他們的區別&#xff0c;近來有空&#xff0c;來通俗說說個人看…
閱讀更多...
n8n系列（1）初識n8n：工作流自動化平臺概述

n8n系列（1）初識n8n：工作流自動化平臺概述

1. 引言 隨著各類自動化工具的涌現，n8n作為一款開源的工作流自動化平臺，憑借其靈活性、可擴展性和強大的集成能力，正在獲得越來越多技術團隊的青睞。 本文作為n8n系列的開篇，將帶您全面了解這個強大的自動化平臺，探索其起源、特性以及與其他工具的差異，幫助您判斷n8n是否…
閱讀更多...
Linux：web服務

Linux：web服務

一、nginx的安裝及啟用 1、為主機配置IP和搭建軟件倉庫 &#xff08;1&#xff09;IP的配置 &#xff08;2&#xff09;搭建軟件倉庫 2、 web服務的安裝與啟用 &#xff08;1&#xff09;nginx的端口 更改nginx端口號 效果 &#xff08;2&#xff09; 默認發布目錄 修改默認發…
閱讀更多...
用卷積神經網絡 (CNN) 實現 MNIST 手寫數字識別

用卷積神經網絡 (CNN) 實現 MNIST 手寫數字識別

在深度學習領域&#xff0c;MNIST 手寫數字識別是經典的入門級項目&#xff0c;就像編程世界里的 “Hello, World”。卷積神經網絡&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;作為處理圖像數據的強大工具&#xff0c;在該任務中展現出卓越的性能。本…
閱讀更多...
從 MDM 到 Data Fabric：下一代數據架構如何釋放 AI 潛能

從 MDM 到 Data Fabric：下一代數據架構如何釋放 AI 潛能

從 MDM 到 Data Fabric&#xff1a;下一代數據架構如何釋放 AI 潛能 —— 傳統治理與新興架構的范式變革與協同進化 引言&#xff1a;AI 規模化落地的數據困境 在人工智能技術快速發展的今天&#xff0c;企業對 AI 的期望已從 “單點實驗” 轉向 “規模化落地”。然而&#…
閱讀更多...
蒼穹外賣部署到云服務器使用Docker

蒼穹外賣部署到云服務器使用Docker

部署前端 1.創建nginx鏡像 docker pull nginx 2.宿主機&#xff08;云服務器&#xff09;創建掛載目錄和文件 最好手動創建 而不是通過docker run創建&#xff0c;否則nginx.conf 默認會被創建為文件夾 nginx.conf 和html可以直接從黑馬給的資料里導入 3.運行nginx容器&am…
閱讀更多...
C++ 滲透 數據結構中的二叉搜索樹

C++ 滲透 數據結構中的二叉搜索樹

歡迎來到干貨小倉庫 "沙漠盡頭必是綠洲。" --面對技術難題時&#xff0c;堅持終會看到希望。 1.二叉搜索樹的概念 二叉搜索樹又稱二叉排序樹&#xff0c;它或者是一顆空樹&#xff0c;或者是具有以下性質的二叉樹&#xff1a; a、若它的左子樹不為空&#xff0c;則…
閱讀更多...
實現滑動選擇器從離散型的數組中選擇

實現滑動選擇器從離散型的數組中選擇

1.使用原生的input 詳細代碼如下&#xff1a; <template><div class"slider-container"><!-- 滑動條 --><inputtype"range"v-model.number"sliderIndex":min"0":max"customValues.length - 1"step&qu…
閱讀更多...
ARM尋址方式

ARM尋址方式

尋址方式指的是確定操作數位置的方式。 尋址方式&#xff1a; 立即數尋址 直接尋址&#xff08;絕對尋址&#xff09;&#xff0c;ARM不支持這種尋址方式&#xff0c;但所有CISC處理器都支持 寄存器間接尋址 3種尋址方式總結如下&#xff1a; 助記符 RTL格式 描述 ADD r0,r1…
閱讀更多...
學苑教育雜志學苑教育雜志社學苑教育編輯部2025年第9期目錄

學苑教育雜志學苑教育雜志社學苑教育編輯部2025年第9期目錄

專題研究 核心素養下合作學習在初中數學中的應用 鄭鐵洪; 4-6 教育管理 小學班級管理應用賞識教育的策略研究 芮望; 7-9 課堂教學 小學數學概念教學的實踐策略 劉淑萍; 10-12 “減負提質”下小學五年級語文課堂情境教學 王利;梁巖; 13-15 小練筆的美麗轉身…
閱讀更多...
關于類型轉換的細節（隱式類型轉換的臨時變量和理解const權限）

關于類型轉換的細節（隱式類型轉換的臨時變量和理解const權限）

文章目錄 前言類型轉換的細節1. 類型轉換的臨時變量細節二&#xff1a;const與指針 前言 關于類型轉換的細節&#xff0c;這里小編和大家探討兩個方面&#xff1a; 關于類型轉化的臨時變量的問題const關鍵字的權限問題 — 即修改權限。小編或通過一道例題&#xff08;配圖&am…
閱讀更多...
技術對暴力的削弱

技術對暴力的削弱

信息時代的大政治分析&#xff1a;效率對暴力的顛覆 一、工業時代勒索邏輯的終結 工廠罷工的消亡 1930年代通用汽車罷工依賴工廠的物理集中、高資本投入和流水線脆弱性&#xff0c;通過暴力癱瘓生產實現勒索。 信息時代企業分散化、資產虛擬化&#xff08;如軟件公司可攜帶代碼…
閱讀更多...
深入理解分布式鎖——以Redis為例

深入理解分布式鎖——以Redis為例

一、分布式鎖簡介 1、什么是分布式鎖 分布式鎖是一種在分布式系統環境下&#xff0c;通過多個節點對共享資源進行訪問控制的一種同步機制。它的主要目的是防止多個節點同時操作同一份數據&#xff0c;從而避免數據的不一致性。 線程鎖&#xff1a; 也被稱為互斥鎖&#xff08…
閱讀更多...
yolo訓練用的數據集的數據結構

yolo訓練用的數據集的數據結構

Football Players Detection using YOLOV11 可以在roboflow上標注 Sign in to Roboflow 訓練數據集只看這個data.yaml 里面是train的image地址和classnames 每個image一一對應一個label 第一個位是分類&#xff0c;0是classnames[0]對應的物體&#xff0c;現在是cuboid &…
閱讀更多...
Redis 使用及命令操作

Redis 使用及命令操作

文章目錄 一、基本命令二、redis 設置鍵的生存時間或過期時間三、SortSet 排序集合類型操作四、查看中文五、密碼設置和查看密碼的方法六、關于 Redis 的 database 相關基礎七、查看內存占用 一、基本命令 # 查看版本 redis-cli --version 結果&#xff1a;redis-cli 8.0.0red…
閱讀更多...
Java大師成長計劃之第13天：Java中的響應式編程

Java大師成長計劃之第13天：Java中的響應式編程

&#x1f4e2; 友情提示&#xff1a; 本文由銀河易創AI&#xff08;https://ai.eaigx.com&#xff09;平臺gpt-4o-mini模型輔助創作完成&#xff0c;旨在提供靈感參考與技術分享&#xff0c;文中關鍵數據、代碼與結論建議通過官方渠道驗證。 隨著現代應用程序的復雜性增加&…
閱讀更多...
華為私有協議Hybrid

華為私有協議Hybrid

實驗top圖 理論環節 1. 基本概念 Hybrid接口&#xff1a; 支持同時處理多個VLAN流量&#xff0c;且能針對不同VLAN配置是否攜帶標簽&#xff08;Tagged/Untagged&#xff09;。 核心特性&#xff1a; 靈活控制數據幀的標簽處理方式&#xff0c;適用于復雜網絡場景。 2. 工作…
閱讀更多...
K8s 常用命令、對象名稱縮寫匯總

K8s 常用命令、對象名稱縮寫匯總

K8s 常用命令、對象名稱縮寫匯總 前言 在之前的文章中已經陸續介紹過 Kubernetes 的部分命令&#xff0c;本文將專題介紹 Kubernetes 的常用命令&#xff0c;處理日常工作基本夠用了。 集群相關 1、查看集群信息 kubectl cluster-info # 輸出信息Kubernetes master is run…
閱讀更多...
【HDLBits刷題】Verilog Language——1.Basics

【HDLBits刷題】Verilog Language——1.Basics

目錄 一、題目與題解 1.Simple wire&#xff08;簡單導線&#xff09; 2.Four wires&#xff08;4線&#xff09; 3.Inverter&#xff08;逆變器&#xff08;非門&#xff09;&#xff09; 4.AND gate &#xff08;與門&#xff09; 5. NOR gate &#xff08;或非門&am…
閱讀更多...
C語言|遞歸求n！

C語言|遞歸求n！

C語言| 函數的遞歸調用 【遞歸求n!】 0!1; 1!1 n! n*(n-1)*(n-2)*(n-3)*...*3*2*1; 【分析過程】 定義一個求n&#xff01;的函數&#xff0c;主函數直接調用 [ Factorial()函數 ] 1 用if語句去實現&#xff0c;把求n!的情況列舉出來 2 if條件有3個&#xff0c;n<0; n0||n…
閱讀更多...
最新文章

Copyright @ 2022~2023