（23）JavaScript與DOM（上）——也適用于新手
文檔對(duì)象模型Document Object Model
DOM（Document Object Model，文檔對(duì)象模型）是一個(gè)通過和JavaScript進(jìn)行內(nèi)容交互的API。Javascript和DOM一般經(jīng)常作為一個(gè)整體，因?yàn)镴avascript通常都是用來進(jìn)行DOM操作和交互的。
主要內(nèi)容來自：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/
關(guān)于DOM，有些知識(shí)需要注意：
1. window對(duì)象作為全局對(duì)象，也就是說你可以通過window來訪問全局對(duì)象。
- 屬性在對(duì)象下面以變量的形式存放，在頁面上創(chuàng)建的所有全局對(duì)象都會(huì)變成window對(duì)象的屬性。
- 方法在對(duì)象下面以函數(shù)的形式存放，因?yàn)樽笥业暮瘮?shù)都存放在window對(duì)象下面，所以他們也可以稱為方法。
2. DOM為web文檔創(chuàng)建帶有層級(jí)的結(jié)果，這些層級(jí)是通過node節(jié)點(diǎn)組成，這里有幾種DOM node類型，最重要的是Element, Text, Document。
- Element節(jié)點(diǎn)在頁面里展示的是一個(gè)元素，所以如果你有段落元素()，你可以通過這個(gè)DOM節(jié)點(diǎn)來訪問。
- Text節(jié)點(diǎn)在頁面里展示的所有文本相關(guān)的元素，所以如果你的段落有文本在里面的話，你可以直接通過DOM的Text節(jié)點(diǎn)來訪問這個(gè)文本
- Document節(jié)點(diǎn)代表是整個(gè)文檔，它是DOM的根節(jié)點(diǎn)。
3. 每個(gè)引擎對(duì)DOM標(biāo)準(zhǔn)的實(shí)現(xiàn)有一些輕微的不同。例如，F(xiàn)irefox瀏覽器使用的Gecko引擎有著很好的實(shí)現(xiàn)（盡管沒有完全遵守W3C規(guī)范），但I(xiàn)E瀏覽器使用的Trident引擎的實(shí)現(xiàn)卻不完整而且還有bug，給開發(fā)人言帶來了很多問題。
如果你正在使用Firefox，我推薦你立即下載Firebug插件，對(duì)于你了解DOM結(jié)構(gòu)非常有用。
Web上的JavaScript
Script元素
當(dāng)你在網(wǎng)站頁面上使用JavaScript的時(shí)候，需要使用SCRIPT元素：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript!</title>
</head>
<body>
<script type="text/javascript">
// <![CDATA[
// ]]>
</script>
</body>
</html> 上述代碼，嚴(yán)格來說SCRIPT的TYPE屬性應(yīng)該設(shè)置為application/javascript，但是由于IE不支持這個(gè)，所以平時(shí)我們不得不寫成text/javascript或者直接去掉type。另外你也可以看到在SCRIPT元素里的注釋行// ，瀏覽器就不會(huì)再解析成XHTML標(biāo)簽了。
Defer屬性
任何在SCRIPT元素里聲明的代碼在頁面加載的時(shí)候都會(huì)運(yùn)行，唯一一個(gè)例外是給SCRIPT元素加上一個(gè)defer屬性。defer屬性告訴瀏覽器加載完HTML文檔以后再執(zhí)行JS代碼，但這個(gè)屬性只能在IE下使用。
連接外部腳本
如果你想了解外部腳本，只需要簡單地在SCRIPT上使用SRC屬性就行了，使用單獨(dú)的JS文件的好處是可以緩存，而且也不需要擔(dān)心CDATA方面的問題：
<script type="text/javascript" src="my-script.js"></script>JavaScript必備
在我們繼續(xù)DOM之前，我們來復(fù)習(xí)一下JavaScript的核心必備知識(shí)，如果你還不了解，也沒關(guān)系，我們?cè)谶@一章節(jié)將稍微花點(diǎn)時(shí)間來回顧一下。
JavaScript有幾種數(shù)據(jù)類型：Number, String, Boolean, Object, Undefined and Null。
單行注釋使用雙斜杠//，雙斜杠后面的所有文字都會(huì)被注釋掉，多行注意使用/和/括住。
Number
在JavaScript里所有的Number都是浮點(diǎn)型的，當(dāng)聲明一個(gè)數(shù)字變量的時(shí)候，記得不要使用任何引號(hào)。
// 注：使用var類聲明變量
var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide * topSide; // = 5000 String
JavaScript里聲明字符串特別簡單，和其它語言一樣，在JS里使用單引號(hào)或雙引號(hào)都可以。
var firstPart = 'Hello';
var secondPart = 'World!';
var allOfIt = firstPart + ' ' + secondPart; // Hello World!
// +符合是字符連接符。也用于數(shù)字相加Boolean
布爾類型用于條件判斷，布爾類型是只有2個(gè)值：true和false。任何使用邏輯操作符的比較都會(huì)返回布爾值。
5 === (3 + 2); // = true
// 你也可以將布爾值賦給一個(gè)變量
var veryTired = true;
// 這樣使用
if (veryTired) {
// 執(zhí)行代碼
} ===也是比較操作符，不僅比較數(shù)值，還比較類型。
Function
函數(shù)是特殊的對(duì)象。
// 使用function操作符來聲明新函數(shù)
function myFunctionName(arg1, arg2) {
// 函數(shù)代碼
}
// 你也可以聲明匿名函數(shù)
function (arg1, arg2) {
// Function code goes here.
}
// 運(yùn)行函數(shù)很簡單，直接在函數(shù)名稱后面加上小括號(hào)就可以了
// 或者也可以帶上參數(shù)
myFunctionName(); // 無參
myFunctionName('foo', 'bar'); // 有參數(shù)
// 也可以使用自調(diào)用
(function () {
// 這里自調(diào)用函數(shù)
})();Array
數(shù)組也是特殊的對(duì)象，它包含了一批值（或?qū)ο螅?，訪問這些數(shù)據(jù)的話需要使用數(shù)字索引：
// 2種方式聲明數(shù)組
// 字面量:
var fruit = ['apple', 'lemon', 'banana'];
// Array構(gòu)造函數(shù):
var fruit = new Array('apple', 'lemon', 'banana');
fruit[0]; // 訪問第1個(gè)項(xiàng)(apple)
fruit[1]; // 訪問第2個(gè)項(xiàng)(lemon)
fruit[2]; // 訪問第3個(gè)項(xiàng)(banana) Object
一個(gè)對(duì)象是一個(gè)key-value的集合，和數(shù)組相似，唯一的不同是你可以為每個(gè)數(shù)據(jù)定義一個(gè)名稱。
// 2種類型定義Object對(duì)象
// 字面量（大括號(hào)）
var profile = {
name: 'Bob',
age: 99,
job: 'Freelance Hitman'
};
// 使用Object構(gòu)造函數(shù)
var profile = new Object();
profile.name = 'Bob';
profile.age = 99;
profile.job = 'Freelance Hitman'; IF/Else語句
JS里使用最多的語句莫過于條件語句了：
var legalDrinkingAge = 21;
var yourAge = 29;
if ( yourAge >= legalDrinkingAge ) {
alert('You can drink.');
} else {
alert('Sorry, you cannot drink.'); JavaScript操作符
建議你訪問這個(gè)頁面來查看所有的JS操作符，這里我僅僅給出一些例子：???
// 加減乘除
var someMaths = 2 + 3 + 4 - 10 * 100 / 2;
// 等于
if ( 2 == (5 - 3 ) { /* 代碼 */ } // == 比較是否相等
// 不等于
if ( 2 != (5 - 3 ) { /* 代碼 */ }
// 嚴(yán)格等于（推薦）
2 === 2 // 代替 2 == 2
2 !== 3 // 代替 2 != 3
// 賦值:
var numberOfFruit = 9;
numberOfFruit -= 2; // 等價(jià)于 "numberOfFruit = numberOfFruit - 2"
numberOfFruit += 2; // 等價(jià)于 "numberOfFruit = numberOfFruit + 2" Loop循環(huán)
Loop循環(huán)在是遍歷數(shù)組或者對(duì)象的所有成員的時(shí)候非常方便，JavaScript里使用最多的是FOR和WHILE語句。
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS'];
// WHILE循環(huán)
var counter = 0;
var lengthOfArray = envatoTutSites.length;
while (counter < lengthOfArray) {
alert(envatoTutSites[counter]);
counter++; // 等價(jià)于counter += 1;
}
// FOR循環(huán)
// i只是用于迭代，可以任意取名
for (var i = 0, length = envatoTutSites.length; i < length; i++) {
alert(envatoTutSites[i]);
} DOM正文
訪問DOM節(jié)點(diǎn)
我們來個(gè)例子，一個(gè)HTML里包含一段文本和一個(gè)無序的列表。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript!</title>
</head>
<body>
<p id="intro">My first paragraph...</p>
<ul>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ul>
<script type="text/javascript">
// <![CDATA[
// ]]>
</script>
</body>
</html> 上面例子里，我們使用getElementById DOM方法來訪問p段落，在SCRIPT里添加如下代碼：
var introParagraph = document.getElementById('intro');
// 現(xiàn)在有了該DOM節(jié)點(diǎn)，這個(gè)DOM節(jié)點(diǎn)展示的是該信息段落變量introParagraph現(xiàn)在已經(jīng)引用到該DOM節(jié)點(diǎn)上了，我們可以對(duì)該節(jié)點(diǎn)做很多事情，比如查詢內(nèi)容和屬性，或者其它任何操作，甚至可以刪除它，克隆它，或者將它移到到DOM樹的其它節(jié)點(diǎn)上。
文檔上的任何內(nèi)容，我們都可以使用JavaScript和DOM API來訪問，所以類似地，我們也可以訪問上面的無序列表，唯一的問題是該元素沒有ID屬性，如果ID的話就可以使用相同的方式，或者使用如下getElementsByTagName方式：
var allUnorderedLists = document.getElementsByTagName('ul');
// 'getElementsByTagName'返回的是一個(gè)節(jié)點(diǎn)集合
// - 和數(shù)組有點(diǎn)相似getElementsByTagName
getElementsByTagName方法返回的是一個(gè)節(jié)點(diǎn)集合，和數(shù)組類似也有l(wèi)ength屬性，重要的一個(gè)特性是他是live的——如果你在該元素里添加一個(gè)新的li元素，這個(gè)集合就會(huì)自動(dòng)更新，介于他和數(shù)組類型，所以可以和訪問數(shù)組一樣的方法來訪問，所以從0開始：
// 訪問無序列表: [0]索引
var unorderedList = document.getElementsByTagName('ul')[0];
// 獲取所有的li集合:
var allListItems = unorderedList.getElementsByTagName('li');
// 循環(huán)遍歷
for (var i = 0, length = allListItems.length; i < length; i++) {
// 彈出該節(jié)點(diǎn)的text內(nèi)容
alert(allListItems[i].firstChild.data);
} 以下圖例更清晰地展示了DOM獲取的知識(shí)：
DOM穿梭
“穿梭”這個(gè)詞主要是用來描述通過DOM查找節(jié)點(diǎn)，DOM API提供了大量的節(jié)點(diǎn)屬性讓我們來往上或者往下查詢節(jié)點(diǎn)。
所有的節(jié)點(diǎn)都有這些屬性，都是可以用于訪問相關(guān)的node節(jié)點(diǎn)：
- Node.childNodes: 訪問一個(gè)單元素下所有的直接子節(jié)點(diǎn)元素，可以是一個(gè)可循環(huán)的類數(shù)組對(duì)象。該節(jié)點(diǎn)集合可以保護(hù)不同的類型的子節(jié)點(diǎn)（比如text節(jié)點(diǎn)或其他元素節(jié)點(diǎn)）。
- Node.firstChild: 與‘childNodes’數(shù)組的第一個(gè)項(xiàng)(‘Element.childNodes[0]‘)是同樣的效果，僅僅是快捷方式。
- Node.lastChild: 與‘childNodes’數(shù)組的最后一個(gè)項(xiàng)(‘Element.childNodes[Element.childNodes.length-1]‘)是同樣的效果，僅僅是快捷方式。shortcut.
- Node.parentNode: 訪問當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，父節(jié)點(diǎn)只能有一個(gè)，祖節(jié)點(diǎn)可以用‘Node.parentNode.parentNode’的形式來訪問。
- Node.nextSibling: 訪問DOM樹上與當(dāng)前節(jié)點(diǎn)同級(jí)別的下一個(gè)節(jié)點(diǎn)。
- Node.previousSibling: 訪問DOM樹上與當(dāng)前節(jié)點(diǎn)同級(jí)別的上一個(gè)節(jié)點(diǎn)。
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
更多建議：