整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
DOM（Document Object Model）即文檔對(duì)象模型。通過(guò)DOM樹這樣一種結(jié)構(gòu)，不僅可以直觀的看到HTML的整體結(jié)構(gòu)，還可以利用DOM樹的一些屬性獲取到某個(gè)元素的子節(jié)點(diǎn)和節(jié)點(diǎn)名稱等信息。
HTML文檔結(jié)構(gòu)：
樹形結(jié)構(gòu)：
childNodes屬性：獲取當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)。
<div id="box">
<p>第一個(gè)child節(jié)點(diǎn)</p>
<h4>第二個(gè)child節(jié)點(diǎn)</h4>
<div>第三個(gè)child節(jié)點(diǎn)</div>
</div>
<script>
let box=document.getElementById("box");
let boxChild=box.childNodes;
console.log(boxChild);
</script>空格和換行也屬于一個(gè)節(jié)點(diǎn)，用text表示。
for(let i=1; i < boxChild.length; i +=2)
console.log(boxChild[i]);獲取1、3、5……奇數(shù)節(jié)點(diǎn)。
nodeName屬性：返回節(jié)點(diǎn)名稱。
for(let i=1; i < boxChild.length; i +=2)
console.log(boxChild[i].nodeName);appendChild(node)：在子節(jié)點(diǎn)最后一位插入新節(jié)點(diǎn)，node為新節(jié)點(diǎn)的名稱。
let newnode=document.createElement("p");
newnode.innerHTML="新節(jié)點(diǎn)";
box.appendChild(newnode);
console.log(boxChild);removeChild(node)：刪除指定父級(jí)元素的某個(gè)子節(jié)點(diǎn)。
項(xiàng)目目標(biāo)：點(diǎn)擊刪除按鈕，依次刪除列表中書籍。
btn.onclick=function(){
list.removeChild(list.childNodes[1]);
}parentNode屬性：返回指定節(jié)點(diǎn)的父節(jié)點(diǎn)。
<div id="box">
<p id="box-item1">第一個(gè)child節(jié)點(diǎn)</p>
<h4>第二個(gè)child節(jié)點(diǎn)</h4>
<div>第三個(gè)child節(jié)點(diǎn)</div>
</div>
<script>
let box_item1=document.getElementById("box-item1");
console.log(box_item1.parentNode);
</script>項(xiàng)目目標(biāo)：點(diǎn)擊叉號(hào)刪除內(nèi)容。
x.onclick=function(){
document.body.removeChild(this.parentNode);
}replaceChild(newnode,oldnode)方法：用新節(jié)點(diǎn)替換之前的節(jié)點(diǎn)。
<div id="box">
<p id="box-item1">第一個(gè)child節(jié)點(diǎn)</p>
<h4>第二個(gè)child節(jié)點(diǎn)</h4>
<div id="box-item3">第三個(gè)child節(jié)點(diǎn)</div>
</div>
<script>
let box_item1=document.getElementById("box-item1");
console.log(box_item1.parentNode);
let h1=document.createElement("h1");
h1.innerHTML="新節(jié)點(diǎn) 第三個(gè)child節(jié)點(diǎn)";
let box_item3=document.getElementById("box-item3");
let box=document.getElementById("box");
box.replaceChild(h1, box_item3);
</script>insertBefore可以在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。
項(xiàng)目目標(biāo)：點(diǎn)擊按鈕，在ul標(biāo)記子節(jié)點(diǎn)的第一位插入包含內(nèi)容“我的世界”，文字顏色為紅色的h4節(jié)點(diǎn)。
let btn=document.getElementById("button");
let game=document.getElementById("game");
btn.onclick=function() {
let newGame=document.createElement("h4");
newGame.innerHTML="我的世界";
newGame.style.color="red";
newGame.style.paddingLeft="40px";
game.insertBefore(newGame, game.firstChild);
}setAttribute屬性：添加指定的屬性，并為其賦指定的值。
項(xiàng)目目標(biāo)：點(diǎn)擊“變”按鈕，將輸入框變?yōu)榘粹o。
let btn=document.getElementById("btn");
let input=document.getElementById("put");
btn.onclick=function() {
input.setAttribute("type", "button");
}.什么是Dom樹
Dom樹簡(jiǎn)單來(lái)說(shuō)就是瀏覽器解析從服務(wù)器接收的html代碼轉(zhuǎn)化為樹形結(jié)構(gòu),使之每一項(xiàng)都成為一個(gè)Dom對(duì)象
2.Dom樹的組成及關(guān)系
Dom樹是由html代碼中的每一個(gè)標(biāo)簽,屬性等對(duì)象轉(zhuǎn)化的節(jié)點(diǎn)組成,html為根節(jié)點(diǎn)其他的為子節(jié)點(diǎn),節(jié)點(diǎn)中的各種關(guān)系可以用我們的家族關(guān)系來(lái)描述,主要是父與子,兄與弟的關(guān)系
3.Dom樹的作用
1.便于瀏覽器通過(guò)Dom樹結(jié)構(gòu)渲染整個(gè)網(wǎng)頁(yè)頁(yè)面(與CSS共同作用)
2.便于用戶通過(guò)Dom樹對(duì)其節(jié)點(diǎn)的增刪改查操作
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dom樹</title>
</head>
<body>
<ul>
<li>鄭州</li>
<li>開封</li>
<li>洛陽(yáng)</li>
</ul>
</body>
</html>由上面的html代碼可以轉(zhuǎn)化的Dom樹結(jié)構(gòu)如下圖所示
Dom樹結(jié)構(gòu)
由上圖可知此Dom樹中根元素HTML有兩個(gè)子元素:head與body;head與body是HTML的子元素,所以它們是父子關(guān)系;head與body在Dom節(jié)點(diǎn)中是兄弟關(guān)系;body節(jié)點(diǎn)中的ul與li之間是父子關(guān)系,li之間是兄弟關(guān)系
4.Dom樹節(jié)點(diǎn)間的層次關(guān)系
深度:是相對(duì)于根節(jié)點(diǎn)而言,如果深度相同并且父節(jié)點(diǎn)也相同,則可認(rèn)為兩個(gè)節(jié)點(diǎn)是兄弟節(jié)點(diǎn)
索引:是相對(duì)于父節(jié)點(diǎn)而言,索引相同的節(jié)點(diǎn)并不一定是兄弟節(jié)點(diǎn),因?yàn)槠涓腹?jié)點(diǎn)不一定相同
Dom樹節(jié)點(diǎn)的層次
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
