1.文檔節(jié)點(diǎn)是每個(gè)文檔的根節(jié)點(diǎn)。在HTML頁(yè)面,文檔節(jié)點(diǎn)始終都是<html>元素,因此我們也稱(chēng)其為**文檔元素**。
2.DOM1級(jí)定義了一個(gè)Node接口,該接口將由DOM中的所有節(jié)點(diǎn)類(lèi)型實(shí)現(xiàn)。這個(gè)Node接口在JavaScript中是作為Node類(lèi)型實(shí)現(xiàn)的。除了IE之外,在其他所有瀏覽器中都可以訪(fǎng)問(wèn)到這個(gè)類(lèi)型。JavaScript中的所有節(jié)點(diǎn)類(lèi)型都繼承自Node類(lèi)型,因此所有節(jié)點(diǎn)類(lèi)型都共享著相同的基本屬性和方法。
3.每個(gè)節(jié)點(diǎn)都有一個(gè)**nodeType**屬性,用于表明節(jié)點(diǎn)的類(lèi)型。節(jié)點(diǎn)類(lèi)型由在Node類(lèi)型中定義的12個(gè)數(shù)值常量來(lái)表示。其中元素節(jié)點(diǎn)屬性值為1,特性節(jié)點(diǎn)的屬性值為2,文本節(jié)點(diǎn)的屬性值為3。將nodeType屬性與數(shù)字值比較可以檢測(cè)其節(jié)點(diǎn)類(lèi)型:
~~~
if (someNode.nodeType == 1){
alert('Node is an element');
}
~~~
4.要了解節(jié)點(diǎn)的具體信息,可以使用**nodeName**和**nodeValue**屬性。其中nodeName保存著節(jié)點(diǎn)的具體名稱(chēng)(如<p>標(biāo)簽的nodeName值為大寫(xiě)的‘P’,nodeValue始終為null)。
5.每個(gè)節(jié)點(diǎn)都有一個(gè)**childNodes**屬性,其中保存著一個(gè)NodeList對(duì)象。NodeList對(duì)象是一種類(lèi)數(shù)組對(duì)象,用于保存一組有序的節(jié)點(diǎn)。雖然可以使用方括號(hào)語(yǔ)法來(lái)訪(fǎng)問(wèn)其子項(xiàng),而且這個(gè)對(duì)象也有l(wèi)ength屬性,但它并不是Array的實(shí)例。NodeList對(duì)象的獨(dú)特之處在于,它實(shí)際上是基于DOM結(jié)構(gòu)動(dòng)態(tài)執(zhí)行查詢(xún)的結(jié)構(gòu),因此DOM結(jié)構(gòu)的變化能夠自動(dòng)反映在NodeList對(duì)象中。將childNodes轉(zhuǎn)換成數(shù)組的方法:
~~~
function convetToArray(nodes){
var array = null;
try {
array = Array.prototype.slice.call(nodes,0);
} catch(error) {
array = new Array();
for (var i=0;i<nodes.length;i++) {
array.push(nodes[i]);
}
}
return array;
}
~~~
元素節(jié)點(diǎn)內(nèi)的空白符也會(huì)作為文本標(biāo)簽被childNodes所包含。
6.描述節(jié)點(diǎn)間關(guān)系的屬性還有:**parentNode、nextSibling、previousSibling、firstChild、lastChild**
7.**hasChildNodes()**方法在節(jié)點(diǎn)包含一或多個(gè)子節(jié)點(diǎn)的情況下返回true。所有節(jié)點(diǎn)都有的最后一個(gè)屬性是ownerDocument,該屬性指向表示整個(gè)文檔的文檔節(jié)點(diǎn),通過(guò)這個(gè)屬性我們可以不必在節(jié)點(diǎn)層次中通過(guò)層層回溯到達(dá)頂端,而是可以直接訪(fǎng)問(wèn)文檔節(jié)點(diǎn)。
8.**appendChild()**向節(jié)點(diǎn)末尾添加一個(gè)節(jié)點(diǎn),并返回新增節(jié)點(diǎn)。如果傳入到appendChild()中的節(jié)點(diǎn)已經(jīng)是文檔的一部分了,那相當(dāng)于將節(jié)點(diǎn)剪切了。
9.**insertBefore()**方法將一個(gè)新節(jié)點(diǎn)插到指定節(jié)點(diǎn)前面,并返回這個(gè)新節(jié)點(diǎn)。這個(gè)方法接收兩個(gè)參數(shù):要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。如果參照節(jié)點(diǎn)是null則與appendChild()執(zhí)行相同結(jié)果。insertBefore()同樣可以實(shí)現(xiàn)剪切。
10.**replaceChild()**方法將一個(gè)新節(jié)點(diǎn)替換掉原節(jié)點(diǎn),并返回原節(jié)點(diǎn)。
11.**removeChild()**方法刪除一個(gè)節(jié)點(diǎn)。
12.***以上四個(gè)方法操作的都是某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn),也就是說(shuō),要使用這幾個(gè)方法必須先取得父節(jié)點(diǎn)(使用parentNode屬性)。***
13.**cloneNode()**方法用于創(chuàng)建節(jié)點(diǎn)副本。若傳入?yún)?shù)為true,則會(huì)進(jìn)行深復(fù)制,即復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹(shù)。否則只會(huì)復(fù)制原節(jié)點(diǎn)本身。cloneNode()方法不會(huì)復(fù)制添加到DOM節(jié)點(diǎn)中的JavaScriipt屬性,例如事件處理程序等。
15.***document.documentElement指向<html>元素。document.body指向<body>元素。***
16.通過(guò)**document.title**屬性可以取得當(dāng)前頁(yè)面的標(biāo)題(并非取得完整的title元素DOM對(duì)象),也可以修改當(dāng)前頁(yè)面的標(biāo)題并反映在瀏覽器的標(biāo)題欄中。修改title屬性的值會(huì)改變<title>元素。
17.**URL**屬性中包含頁(yè)面完整的URL,**domain**屬性中只包含頁(yè)面的域名,而**referrer**屬性中則保存著鏈接到當(dāng)前頁(yè)面的那個(gè)頁(yè)面的URL。所有這些信息都存在于請(qǐng)求的HTTP頭部。這三個(gè)屬性中只有domain是可以設(shè)置的,但由于安全方面的限制,也并非可以給domain設(shè)置任何值。如果URL中包含一個(gè)子域名,則只能將domain設(shè)置為其主域名,同時(shí)不能將主域名設(shè)置為子域名。設(shè)置document.domain的意義在于,當(dāng)頁(yè)面中包含來(lái)自其他子域的框架或內(nèi)嵌框架時(shí),能夠方便地進(jìn)行相互訪(fǎng)問(wèn)而不受限于跨域安全限制。
18.getElementsByTagName()方法返回的是包含零或多個(gè)元素的nodeList。在HTML文檔中,這個(gè)方法會(huì)返回一個(gè)HTMLCollection對(duì)象,作為一個(gè)‘動(dòng)態(tài)’集合。
19.getElementsByName()方法常用于取得單選按鈕。
20.document.implementation.hasFeature()方法用于檢測(cè)瀏覽器是否支持給定的實(shí)現(xiàn)部分以及所支持的版本。通常還是要搭配能力檢測(cè)使用。
21.document.write()和document.writeln()方法都接收一個(gè)字符串參數(shù),即要寫(xiě)入到輸出流中的文本。write()會(huì)原樣寫(xiě)入,而writeln()則會(huì)在字符串的末尾添加一個(gè)換行符(\n).
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOCUMENT.WRITE() TEST</title>
</head>
<body>
<p>the Curent date and time is:
<script>
document.write('<strong>'+(new Date().toString())+'</strong>');
</script>
</p>
<script>
</script>
</body>
</html>
~~~
這個(gè)例子展示了在頁(yè)面加載過(guò)程中輸出當(dāng)前日期和時(shí)間的代碼。此外,還可以使用write()和writeln()方法動(dòng)態(tài)地包含外部資源,例如Javascript文件等(必須做轉(zhuǎn)義處理)。
**如果在文檔加載結(jié)束后(如window.onload事件之后)再調(diào)用document.write(),那么輸出的內(nèi)容將會(huì)重寫(xiě)整個(gè)頁(yè)面。**
22.所有元素對(duì)象都有的常用屬性包括:id、title、className,它們也都是可修改的。
23.與特性相關(guān)的方法有三個(gè)setAttribute()、getAttribute()、removeAttribute()。
有兩類(lèi)特殊的特性,它們雖然有對(duì)應(yīng)的屬性名,但屬性的值與通過(guò)getAttribute()返回的值并不同。第一類(lèi)特性就是style,在通過(guò)getAttribute()訪(fǎng)問(wèn)時(shí),返回的style特性值中包含的是CSS文本,而通過(guò)屬性來(lái)訪(fǎng)問(wèn)它則會(huì) 返回一個(gè)對(duì)象。第二類(lèi)特性是onclick這樣的事件處理程序。如果通過(guò)getAttribute()訪(fǎng)問(wèn)返回的是相應(yīng)的字符串,而在訪(fǎng)問(wèn)onclick屬性時(shí)返回的是一個(gè)JavaScript函數(shù)或null。
24.創(chuàng)建元素節(jié)點(diǎn):document.createElement(),接受一個(gè)表示要?jiǎng)?chuàng)建的標(biāo)簽的字符串,如'div'。
25.創(chuàng)建文本節(jié)點(diǎn):document.createTextNode();通過(guò)nodeValue屬性修改文本節(jié)點(diǎn)。
26.normalize()方法用于格式化處理文檔樹(shù)中的文本節(jié)點(diǎn)(包括空文本節(jié)點(diǎn)或接連出現(xiàn)的兩個(gè)文本節(jié)點(diǎn)等情況)。而splitText()與前者相反,這個(gè)方法會(huì)按照指定的位置分割nodeValue值。
27.**NodeList及其近親NamedNodeMap和HTMLCollection這三個(gè)集合都是動(dòng)態(tài)的,而不是某個(gè)時(shí)間節(jié)點(diǎn)生成快照。換句話(huà)說(shuō),每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時(shí),它們都會(huì)得到更新。因此,它們始終都會(huì)保存著最新、最準(zhǔn)確的消息。從本質(zhì)上說(shuō),所有NodeList對(duì)象都是在訪(fǎng)問(wèn)DOM文檔時(shí)實(shí)時(shí)運(yùn)行的查詢(xún)。(不失時(shí)機(jī)地緩存NodeList對(duì)象的長(zhǎng)度是處理這種特性的一種技巧)**
~~~
var divs = document.getElementsByTagName("div");
alert(divs instanceof HTMLCollection); //true (chrome中返回false,divs是NodeList對(duì)象)
var div = document.getElementById("div1");
var children = div.childNodes; //獲取div元素子節(jié)點(diǎn)集合
alert(children instanceof NodeList); //true
var attrs = div.attributes; //獲取div元素的特性
alert(children instanceof NamedNodeMap); //true
~~~
- 第一章 JavaScript簡(jiǎn)介
- 第二章 在HTML中使用JavaScript
- 第三章 基本概念
- 第四章 變量、作用域和內(nèi)存問(wèn)題
- 第五章 引用類(lèi)型
- 第六章 面向?qū)ο蟮某绦蛟O(shè)計(jì)
- 第七章 函數(shù)表達(dá)式
- 第八章 BOM
- 第九章 客戶(hù)端檢測(cè)
- 第十章 DOM
- 第十一章 DOM擴(kuò)展
- 第十二章 DOM2和DOM3
- 第十三章 事件
- 第十四章 表單腳本
- 第十六章 HTML5腳本程序
- 第十七章 錯(cuò)誤處理與調(diào)試
- 第二十章 JSON
- 第二十一章 AJAX和Comet
- 第二十二章 高級(jí)技巧
- 第二十三章 離線(xiàn)應(yīng)用與客戶(hù)端存儲(chǔ)
- 第二十四章 最佳實(shí)踐
- 第二十五章 新興的API
