（24）JavaScript與DOM（下）
介紹
上一章我們介紹了JavaScript的基本內(nèi)容和DOM對(duì)象的各個(gè)方面，包括如何訪問(wèn)node節(jié)點(diǎn)。本章我們將講解如何通過(guò)DOM操作元素并且討論瀏覽器事件模型。
本文參考：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/
操作元素
上一章節(jié)我們提到了DOM節(jié)點(diǎn)集合或單個(gè)節(jié)點(diǎn)的訪問(wèn)步驟，每個(gè)DOM節(jié)點(diǎn)都包括一個(gè)屬性集合，大多數(shù)的屬性都提供為相應(yīng)的功能提供了抽象。例如，如果有一個(gè)帶有ID屬性intro的文本元素，你可以很容易地通過(guò)DOM API來(lái)改變?cè)撛氐念伾?/p>
document.getElementById('intro').style.color = '#FF0000';為了理解這個(gè)API的功能，我們一步一步分開來(lái)看就非常容易理解了：
var myDocument = document;
var myIntro = myDocument.getElementById('intro');
var myIntroStyles = myIntro.style;
// 現(xiàn)在，我們可以設(shè)置顏色了:
myIntroStyles.color = '#FF0000';現(xiàn)在，我們有了該文本的style對(duì)象的引用了，所以我們可以添加其它的CSS樣式：
myIntroStyles.padding = '2px 3px 0 3px';
myIntroStyles.backgroundColor = '#FFF';
myIntroStyles.marginTop = '20px'; 這里我們只是要了基本的CSS屬性名稱，唯一區(qū)別是CSS屬性的名稱如果帶有-的話，就需要去除，比如用marginTop代替margin-top。例如，下面的代碼是不工作的，并且會(huì)拋出語(yǔ)法錯(cuò)誤：
myIntroStyles.padding-top = '10em';
// 產(chǎn)生語(yǔ)法錯(cuò)誤：
// 在JavaScript里橫線-是減法操作符
// 而且也沒有這樣的屬性名稱屬性可以像數(shù)組一樣訪問(wèn)，所以利用這個(gè)知識(shí)我們可以創(chuàng)建一個(gè)函數(shù)來(lái)改變?nèi)魏谓o定元素的樣式：
function changeStyle(elem, property, val) {
elem.style[property] = val; // 使用[]來(lái)訪問(wèn)屬性
}
// 使用上述的函數(shù)：
var myIntro = document.getElementById('intro'); // 獲取intro文本對(duì)象
changeStyle(myIntro, 'color', 'red'); 這僅僅是個(gè)例子，所以該函數(shù)也許沒什么用，語(yǔ)法上來(lái)說(shuō)，直接用還是會(huì)快點(diǎn)，例如（elem.style.color = ‘red’）。除了style屬性以外，一個(gè)節(jié)點(diǎn)（或元素）也還有其他很多屬性可以操作，如果你使用Firebug，點(diǎn)擊DOM選項(xiàng)卡可以看到所有該節(jié)點(diǎn)（或元素）的所有屬性：
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
更多建議：