JavaScript通過document類型表示文檔。在瀏覽器中，document對象是HTMLDocument的一個實例，表示整個HTML頁面。document對象是window對象的一個屬性。
Document特征：
- nodetype的值為9
- nodename的值為"#document"
- nodevalue的值為null
- parentnode的值為null
- ownerDocument的值為null
- .......
Document類型可以表示HTML頁面或者基於XML頁面的文檔。
1.文檔的子節點
documentElement屬性始終指向<html>元素；可以通過childNode列表訪問文檔元素。
|
1
2
3
4
5
|
<
html
>
<
body
>
</
body
>
</
html
>
|
|
1
2
3
|
var
html=document.documentElement;
//取得<html>元素的引用
alert(html===document.childNode[0]);
//true
alert(html===document.firstChild);
//true
|
document.body可以取得<body>元素。
所有瀏覽器都支持這兩種屬性。
2.文檔信息
標題：
|
1
2
3
4
|
//取得文檔標題
var
originaTitle=document.title;
//設置文檔標題
document.title=
"New Page Title"
;
|
|
1
2
3
4
5
6
|
//取得完整的URL地址
var
url=document.url;
//取得域名
var
domain=document.domain;
//取得來源頁URL
var
referrer=docment.refeerer;
|
這3個屬性中domain是可以設置的，但有限制。
|
1
2
3
4
5
6
7
8
|
//假設頁面來自p2p.wrox.com域
document.domain=
"wrox.com"
//正確
document.domain=
"baidu.com"
//錯誤
//域名一開始是松散的就不能設置成緊湊的
document.domain=
"wrox.com"
//松散的(正確)
document.domain=
"p2p.wrox.com"
//緊湊的(錯誤)
|
3.查找元素
documen.getElementsById()
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div id=
"myDiv"
>Some text</div>
//取得<div>元素的引用()
var
div=document.getElementById(
"myDiv"
);
//錯誤示范(不區分大小寫，但在IE7及以前可用)
var
div=document.getElementById(
"mydiv"
);
//特殊的IE7及以前版本
<input type=
"text"
name=
"MyElement"
value=
"text"
/>
<div id=
"MyElement"
>div</div>
//在使用document.getElementById("MyElement"),IE7及以前版本會取得對input元素的引用，而不是對div元素的引用
|
documen.getElementsByTagName(),返回包含零個或多個元素的NodeList.
|
1
2
3
4
5
6
|
//取得img元素的引用
var
images=document.getElementsByTagName(
"img"
);
//輸出圖像的數量
alert(images.length);
//輸出第一個圖像的src屬性
alert(images[0].src);
|
documen.getElementsByName(),只有HTMLDocument類型才有。
4.特殊集合
document.anchors，包含文檔中所有帶name屬性的a標簽。
document.form，包含文檔中所有的form元素。
document.image，包含文檔中所有圖片。
document.link，包含文檔中所有帶href的a標簽。
5.文檔寫入
document.write()，輸出顯示到文檔中。
document.writeln()，輸出及換行。
document.open()，打開網頁。
document.close()，關閉網頁。