Document類型
JavaScript通過Document類型表示文檔。在瀏覽器中,document對象是HTMLDocument(繼承自Document類型)的一個實例刃永,表示整個HTML也頁面。而且,document對象是window對象的一個屬性施蜜,可以作為全局對象來訪問。Document節(jié)點具有下列特征:
- nodeType的值為9
nodeName的值為"#document"
nodeValue的值為null
parentNode的值為null
ownerDocument的值為null
其節(jié)點可能是一個DocumentType(最多一個)雌隅、Element(最多一個)翻默、ProcessingInstruction或Comment缸沃。
Document類型可以表示HTML頁面或其他基于XML的文檔。最常見的應用還是作為HTMLDocument實例的document對象修械。通過這個文檔對象趾牧,不僅可以取得與頁面有關的信息,而且還能操作頁面的外觀及其底層結構肯污。1.文檔的子節(jié)點
documentElement和childNodes內置的訪問文檔子節(jié)點的快捷方式翘单。
documentElement始終指向HTML頁面中的<html>元素。
<html>
<body>
</body>
</html>
var html = document.documentElement;
alert(html == document.childNodes[0]);//true
alert(html == document.firstChild);//true
作為HTMLDocument實例蹦渣,document對象還有一個body屬性哄芜,直接指向<body>元素。
var body = document.body; //取得對<body>引用
Document另一個可能的子節(jié)點是DocumentType柬唯。通常將<!DOCTYPE>標簽看成一個與文檔其它部分不同的實體忠烛,可以通過doctype屬性訪問。
var doctype = document.doctype; //取得對<!DOCTYPE>引用
瀏覽器對docume.doctype的支持差別很大权逗。
- 2.文檔信息
作為HTMLDocument的一個實例美尸,document對象還有一些標準的Document對象所沒有的屬性。
title屬性:包含著<title>元素中的文本斟薇∈玻可以取得當前頁面的標題也可以修改。
var originalTitle = document.title;
document.title = "New page title"
接下來介紹的3個屬性都與對網頁的請求有關堪滨,它們是URL胯陋、domain和referrer。
URL屬性包含頁面完整的URL袱箱,domain屬性中只包含頁面的域名遏乔,referrer屬性保存著諒解到當前頁面的那個頁面的URL。在沒有來源頁面的情況下发笔,referrer屬性中可能會包含空字符串盟萨。所有這些信息都存在于HTTP頭部,只不過通過這些屬性讓我們能夠在JavaScript中訪問它們而已了讨。
var url = document.URL;
var domain = document.domain;
var referrer = document.referrer;
URL屬性與domain屬性是相互關聯的捻激,如果document.URL等于https://www.baidu.com/,那么document.domain就等于www.baidu.com前计。
在3個屬性中胞谭,只有domain屬性是可設置的。但由于安全方面的限制男杈,也并非可以給domain設置任何值丈屹。如果URL中包含一個子域名,如p2p.wrox.com伶棒,那就只能將domain設置為wrox.com旺垒。不能將這個屬性設置為URL中不包含的域彩库。
//假設頁面來自p2p.wrox.com域
document.domain = "wrox.com" //成功
document.domain = "nczonline.net"; //出錯
由于跨域安全限制,來自不同子域的頁面無法通過JavaScript通信袖牙。而通過將每個頁面的document.domain設置為相同的值,這些頁面就可以互相訪問對方包含的JavaScript對象了舅锄。
例如鞭达,假設有一個頁面加載自www.wrox.com,其中包含一個內嵌框架皇忿,框架內的頁面加載p2p.wrox.com畴蹭,由于documen.domain字符串不一樣,內外兩個頁面之間無法相互訪問對方的JavaScript對象鳍烁,但如果將這兩個頁面的document.domain都設置為"wrox.com"叨襟,它們之間就可以通信了。
瀏覽器對domain屬性還有一個限制幔荒,即如果document.domain設置為“松散的”就不能將它再設置為“緊繃的”糊闽。
document.domain = "wrox.com";//松散的(成功)
document.domain = "p2p.wrox.com";//緊繃的(出錯)
- 3.查找元素
最常見的DOM應用,就是取得特定的某個或某租元素的引用爹梁,然后在執(zhí)行一些操作右犹。
Document類型為此提供了兩個方法:getElemengById()和getElementsByTagName()。
getElemengById()接收一個參數姚垃,要取得的元素的ID念链。找到相應元素放回該元素,否則返回null积糯。如果頁面中多個元素的ID值相同掂墓,則返回文檔中第一次出現的元素。
getElementsByTagName()接收一個參數看成,要取得的元素的標簽名君编,返回0或多個元素的NodeList。在HTML文檔中川慌,這個方法會返回一個HTMLCollection對象啦粹,最為一個動態(tài)集合,該對象與NodeList非常相似窘游。HTMLCollection對象有一個叫做namedItem()的方法唠椭。使用這個方法可以通過元素的name特性取得集合中的項。
var images = document.getElementsByTagName("img");
alert(images.length);
alert(images[0].src);
alert(images.item(0).src);
![](myimage.gif)
var myImage = images.namedItem("myImage");
var myImage = images["myImage"];
對HTMLCollection,我們可以向方括號中傳入數值或字符串形式的所引致忍饰。在后臺贪嫂,對數值索引會調用item(),對字符串索引會調用namedItem()艾蓝。
HTMLDocument類型才有的方法力崇,getElementsByName()斗塘。返回帶有給定name的所有元素。
- 4.特殊集合
處理屬性和方法亮靴,document對象還有一些特殊的集合馍盟,這些集合都是HTMLCollection對象,包括: - document.anchors,包含所有帶name特性的<a>元素茧吊;
- document.forms:包含文檔中所有<form>元素
- document.images:包含文檔中所有<img>元素
- document贞岭。links:包含文檔href特性的<a>元素
集合中的項會隨著當前文檔內容的更新而更新。
- 5.DOM一致性檢測
由于DOM分為多個級別搓侄,也包含多個部分瞄桨,檢測瀏覽器實現了DOM的那些部分十分必要。
document.implementation屬性就是為此提供相應信息和功能的對象讶踪。DOM1級只為document.implementation規(guī)定了一個方法芯侥,hasFeature(),這個方法接受兩個參數乳讥,要檢測的DOM功能名稱即版本號柱查。
var hasXmlDom = document.implementation.hasFeature("XML","1.0");
在使用DOM的某個特殊功能之前,最好處理檢測hasFeature之外云石,還同時使用能力檢測物赶。
- 6.文檔寫入
document對象將輸出流寫入到網頁中的能力體現在下列4個方法中:write()、writeln()留晚、open()和close()酵紫。write()、writeln()接收一個字符串參數错维,要寫入到輸出流中的文本奖地。write()原樣寫,writeln()會在字符串末尾添加換行符(\n)赋焕。在頁面加載過程中参歹,可以使用這兩個方法項頁面中動態(tài)加入內容。
open()和cloes()分別打開和關閉網頁的輸出流隆判。