本文同步發(fā)表于我的個(gè)人網(wǎng)站：ZackLive
這是《JavaScript學(xué)徒》系列的第八課，今天會(huì)繼續(xù)《JavaScript DOM 編程藝術(shù)》第4章漾抬，進(jìn)一步完善圖片庫(kù)網(wǎng)頁(yè)宿亡。這一課的學(xué)習(xí)重點(diǎn)是文本節(jié)點(diǎn)的操作。
教學(xué)視頻連結(jié)
childNodes屬性
childNodes可以用來取得一個(gè)元素對(duì)象的所有子節(jié)點(diǎn)纳令，是一個(gè)包含全部子節(jié)點(diǎn)的數(shù)組挽荠。是復(fù)數(shù)，有s平绩。
function countBodyChildren() {
? var body_element = document.getElementsByTagName("body")[0];
? alert(body_element.childNodes.length);
}
body只有一個(gè)圈匆，因此是返回?cái)?shù)組的第一個(gè)元素，即下標(biāo)（index）為零的元素捏雌。childNodes是數(shù)組跃赚，可以用length得到數(shù)組元素總個(gè)數(shù)。
若要讓一個(gè)函數(shù)在頁(yè)面加載時(shí)執(zhí)行性湿，可以將該函數(shù)賦值給window的onload事件纬傲。
function countBodyChildren() {
? var body_element = document.getElementsByTagName("body")[0];
? alert(body_element.childNodes.length);
}
window.onload = countBodyChildren;
nodeType屬性
之前講過節(jié)點(diǎn)一共有三種，它們有各自的nodeType屬性值：
元素節(jié)點(diǎn)的nodeType屬性值是1窘奏。
屬性節(jié)點(diǎn)的nodeType屬性值是2嘹锁。
文本節(jié)點(diǎn)的nodeType屬性值是3。
可以將countBodyChildren函數(shù)最后alert的內(nèi)容改為body_element.nodeType着裹，boby是元素節(jié)點(diǎn)领猾，結(jié)果應(yīng)為1.
nodeValue屬性
nodeValue可以取得文本節(jié)點(diǎn)的值。但要記得骇扇，諸如段落標(biāo)簽p當(dāng)中的文字并不是這標(biāo)簽的nodeValue摔竿，而是它底下的文本節(jié)點(diǎn)的nodeValue。而這個(gè)文本節(jié)點(diǎn)則是段落標(biāo)簽的第一個(gè)childNodes少孝。
在index.html里的placeholder圖片底下加入：
Choose an image.
接著继低，在JavaScript里取得這個(gè)段落，并輸出文字內(nèi)容：
var description = document.getElementById("description");
alert(description.childNodes[0].nodeValue);
nodeValue可以修改：
description.childNodes[0].nodeValue = text;
firstChild和lastChild屬性
數(shù)組元素childNodes[0]可以寫成firstChild稍走，即第一個(gè)子節(jié)點(diǎn)袁翁。
同理，最后一個(gè)子節(jié)點(diǎn)可以寫成lastChild婿脸。
修改圖片庫(kù)
將圖片的title屬性值放到description當(dāng)中粱胜，最終的showPic函數(shù)：
function showPic(whichpic) {
? var source = whichpic.getAttribute("href");
? var placeholder =document.getElementById("placeholder");
? placeholder.setAttribute("src", srouce);
? var text = whichpic.getAttribute("title");
? var description = document.getElementById("description");
? description.firstChild.nodeValue = text;
}
參考樣式表：
body {
? font-family: "Helvetica", "Arial", serif;
? color: #333;
? background-color: #ccc;
? margin: 1em 10%;
}
h1 {
? color: #333;
? background-color: transparent;
}
a {
? color: #c60;
? background-color: transparent;
? font-weight: bold;
? text-decoration: none;
}
ul {
? padding: 0;
}
li {
? float: left;
? padding: 1em;
? list-style: none;
}
img {
? display: block;
? clear: both;
}
《JavaScript DOM 編程藝術(shù)》第4章重點(diǎn)
這一章的重點(diǎn)是修改文本節(jié)點(diǎn)，介紹以下五種屬性：
childNodes
nodeType
nodeValue
firstChild
lastChild
