日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

什么是DOM樹(shù)？

DOM（Document Object Model）即文檔對(duì)象模型。通過(guò)DOM樹(shù)這樣一種結(jié)構(gòu)，不?僅可以直觀(guān)的看到HTML的整體結(jié)構(gòu)，還可以利用DOM樹(shù)的一些屬性獲取到某個(gè)元素的子節(jié)點(diǎn)和節(jié)點(diǎn)名稱(chēng)等信息。

安丘網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),安丘網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為安丘成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的安丘做網(wǎng)站的公司定做！

HTML文檔結(jié)構(gòu)：

樹(shù)形結(jié)構(gòu)：

childNodes和nodeName屬性

childNodes屬性：獲取當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)。

    
第一個(gè)child節(jié)點(diǎn)

    
第二個(gè)child節(jié)點(diǎn)

    
第三個(gè)child節(jié)點(diǎn)

空格和換行也屬于一個(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)名稱(chēng)。

for(let i = 1;  i < boxChild.length; i += 2)
  console.log(boxChild[i].nodeName);

appendChild方法

appendChild(node)：在子節(jié)點(diǎn)最后一位插入新節(jié)點(diǎn)，node為新節(jié)點(diǎn)的名稱(chēng)。

let newnode = document.createElement("p");
newnode.innerHTML = "新節(jié)點(diǎn)";
box.appendChild(newnode);

console.log(boxChild);

removeChild方法

removeChild(node)：刪除指定父級(jí)元素的某個(gè)子節(jié)點(diǎn)。

項(xiàng)目目標(biāo)：點(diǎn)擊刪除按鈕，依次刪除列表中書(shū)籍。

btn.onclick = function(){
    list.removeChild(list.childNodes[1]);
}

parentNode屬性

parentNode屬性：返回指定節(jié)點(diǎn)的父節(jié)點(diǎn)。

    
第一個(gè)child節(jié)點(diǎn)

    
第二個(gè)child節(jié)點(diǎn)

    
第三個(gè)child節(jié)點(diǎn)

項(xiàng)目目標(biāo)：點(diǎn)擊叉號(hào)刪除內(nèi)容。

x.onclick = function(){
    document.body.removeChild(this.parentNode);
}

replaceChild方法

replaceChild(newnode,oldnode)方法：用新節(jié)點(diǎn)替換之前的節(jié)點(diǎn)。

    
第一個(gè)child節(jié)點(diǎn)

    
第二個(gè)child節(jié)點(diǎn)

    
第三個(gè)child節(jié)點(diǎn)

insertBefore方法

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屬性

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");
}

當(dāng)前題目：一文詳解Javascript DOM樹(shù)結(jié)構(gòu)
新聞來(lái)源：http://www.5511xx.com/article/ccojsed.html