一.JS中的DOM
1.DOM的概述
DOM是Document Object Model 文檔對(duì)象模型的縮寫(xiě)
HTML DOM是將HTML文檔表達(dá)為樹(shù)狀結(jié)構(gòu),定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法:DOM樹(shù):節(jié)點(diǎn)的層次,文檔節(jié)點(diǎn),元素節(jié)點(diǎn),屬性節(jié)點(diǎn),文本節(jié)點(diǎn);DOM把一個(gè)文檔表示為一顆家譜樹(shù)(父,子,兄弟);
2.獲取元素的三種方式
- 通過(guò)元素 Id getElementById，返回?fù)碛兄付?id 的第一個(gè)元素，如果不存在則返回 null
- 通過(guò)標(biāo)簽名字 getElementsByTagName，返回一個(gè)包括所有給定標(biāo)簽名稱的元素集合，如果沒(méi)有 匹配的元素，返回一個(gè)空集。
- 通過(guò) class 名字 getElementsByClassName，返回一個(gè)包含所有指定class名稱的元素集合，可以 在任意元素上調(diào)用該方法
- 通過(guò) name 名字 getElementsByName，返回一個(gè)包含所有指定name名稱的元素集合，可以 在任意元素上調(diào)用該方法
案例
<script>
window.onload = function () {
//獲取元素對(duì)象
//1通過(guò)id的方式來(lái)獲取唯一的標(biāo)簽對(duì)象
let div1E1 = document.getElementById("div1Id");
console.log(div1E1);
//2 通過(guò)標(biāo)簽名稱來(lái)獲取所有的標(biāo)簽對(duì)象
let divEls = document.getElementsByTagName("div");
console.log(divEls);
//3通過(guò)標(biāo)簽上的Class屬性來(lái)獲取多個(gè)標(biāo)簽對(duì)象
let clzEls = document.getElementsByClassName("div");
console.log(clzEls);
}
</script>
3.如何操作元素對(duì)象的屬性
-
操作標(biāo)準(zhǔn)屬性
獲取屬性值 : 元素對(duì)象[“屬性名”]
**元素對(duì)象.屬性名** **元素對(duì)象.getAttribute("屬性名")** -
設(shè)置屬性值： 元素對(duì)象[”屬性名”] = 值
**元素對(duì)象.屬性名 = 值** **元素對(duì)象.setAttribute("屬性名", 值)** -
操作自定義屬性
獲取屬性值： 元素對(duì)象.getAttribute("屬性名")
設(shè)置屬性值： 元素對(duì)象.setAttribute("屬性名", 值)
案例
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
//1 獲取元素對(duì)象
let divE1 = document.getElementById("divId");
//2 操作屬性
//2.1 標(biāo)準(zhǔn)自帶屬性的操作
//2.1.1 普通的標(biāo)準(zhǔn)自帶屬性的操作
console.log(divE1["id"], divE1.id, divE1.getAttribute("id"));
divE1["id"] = "newDivId1";
divE1.id = "newDivId2";
divE1.setAttribute("id", "newDivId3");
//2.1.2 特殊的的標(biāo)準(zhǔn)自帶屬性的操作
console.log(divE1["className"], divE1.className, divE1.getAttribute("class"));
divE1["className"] = "newClz1";
divE1.className = "newClz2";
divE1.setAttribute("class", "newClz3");
console.log(divE1["className"], divE1.className, divE1.getAttribute("class"));
//帶特殊符號(hào)
console.log(divE1["style"]);
console.log(divE1.style);
//console.log(divE1.getAttribute("style"));不推薦因?yàn)榉祷氐氖亲址皇菍?duì)象,不方便使用
console.log(divE1["style"]["background-color"], divE1.style.backgroundColor);//backgroundColor是別名
divE1["style"]["background-color"] = "green";
divE1.style.backgroundColor = "red";
//2.2 自定義屬性的操作,只能使用getter和setter方法獲取
console.log(divE1["oo"], divE1.oo, divE1.getAttribute("oo"));
divE1.setAttribute("oo", "newXX")
console.log(divE1.getAttribute("oo"));
//2.3 特殊屬性操作 key=value 的屬性(checked="checked",selected="selected")
// 關(guān)注是有沒(méi)有,值是true和false
let inputE1 = document.getElementById("inputId");
console.log(inputE1.checked);
inputE1.checked = true;
//inputE1.checked=false;
//inputE1.setAttribute("checked","false")
// 如果是字符串通過(guò)里面有沒(méi)有值來(lái)判斷是true還是false,所以不使用getset
}
</script>
</head>
<body>
<div id="divId" class="clz" style="background-color: pink;height: 100px" oo="xx"></div>
<input id="inputId" type="checkbox"/>
</body>
4.Node對(duì)象的屬性和方法
| 屬性名 | 描述 |
|---|---|
| firstChild | 指向在子節(jié)點(diǎn)列表中的第一個(gè)節(jié)點(diǎn) |
| lastChild | 指向在子節(jié)點(diǎn)列表中的最后一個(gè)節(jié)點(diǎn) |
| childNodes | 所有子節(jié)點(diǎn)的列表 |
| previousSibling | 指向前一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是第一個(gè),那么該值為null |
| nextSibling | 指向后一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是最后一個(gè),那么該值為null |
| parentNode | 父節(jié)點(diǎn) |
| document.createElement("元素對(duì)象名") | 新建一個(gè)元素對(duì)象 |
| inerText | 直接加入文本 |
| innerHTML | 可以設(shè)置html 代碼(標(biāo)簽) |
事件處理
事件綁定的方式
方式一 在元素上使用屬性綁定
方式二通過(guò)元素對(duì)象的事件屬性綁定( 使用這種方式為元素綁定事件, 一定是要在元素被加載后,然后再執(zhí)行上面的JS代碼)
//方式一 在元素上使用屬性綁定
<input type="button" value="點(diǎn)我啊" onclick="alert('點(diǎn)我干啥?');"/>
//方式二通過(guò)元素對(duì)象的事件屬性綁定( 使用這種方式為元素綁定事件, 一定是要在元素被加載后,然后再執(zhí)行上面的JS代碼)
<!--在該元素被加載完的時(shí)候沒(méi)有綁定事件--> <input type="button" value="點(diǎn)我啊" id="btn"/>
//使用JS代碼為元素綁定事件
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("點(diǎn)我干啥");
}
常用事件類型
鼠標(biāo)事件
| 屬性 | 描述 |
|---|---|
| onclick | 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄 |
| ondblclick | 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄 |
| onmousedown | 鼠標(biāo)按鈕被按下 |
| onmouseleave | 當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā) |
| onmousemove | 鼠標(biāo)被移動(dòng) |
| onmouseover | 鼠標(biāo)移到某元素之上 |
| onmouseout | 鼠標(biāo)從某元素移開(kāi) |
| onmouseup | 鼠標(biāo)按鍵被松開(kāi) |
鍵盤(pán)事件
| 屬性 | 描述 |
|---|---|
| onkeydown | 某個(gè)鍵盤(pán)按鍵被按下 |
| onkeypress | 某個(gè)鍵盤(pán)按鍵被按下并松開(kāi) |
| onkeyup | 某個(gè)鍵盤(pán)按鍵被松開(kāi) |
表單事件
| 屬性 | 描述 |
|---|---|
| onblur | 元素失去焦點(diǎn)時(shí)觸發(fā) |
| onchange | 該事件在表單元素的內(nèi)容改變時(shí)觸發(fā) |
| onfocus | 元素獲取焦點(diǎn)時(shí)觸發(fā) |
| onsubmit | 表單提交時(shí)觸發(fā) |
