JavaScript文檔對象模型(DOM)——節(jié)點層次Document類型

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()分別打開和關閉網頁的輸出流隆判。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末犬庇,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子侨嘀,更是在濱河造成了極大的恐慌臭挽,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咬腕,死亡現場離奇詭異欢峰,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門纽帖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宠漩,“玉大人,你說我怎么就攤上這事懊直“怯酰” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵室囊,是天一觀的道長雕崩。 經常有香客問我,道長波俄,這世上最難降的妖魔是什么晨逝? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任蛾默,我火速辦了婚禮懦铺,結果婚禮上,老公的妹妹穿的比我還像新娘支鸡。我一直安慰自己冬念,他們只是感情好,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布牧挣。 她就那樣靜靜地躺著急前,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瀑构。 梳的紋絲不亂的頭發(fā)上裆针,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天,我揣著相機與錄音寺晌,去河邊找鬼世吨。 笑死,一個胖子當著我的面吹牛呻征,可吹牛的內容都是我干的耘婚。 我是一名探鬼主播,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼陆赋,長吁一口氣:“原來是場噩夢啊……” “哼沐祷!你這毒婦竟也來了?” 一聲冷哼從身側響起攒岛,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤赖临,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后灾锯,有當地人在樹林里發(fā)現了一具尸體思杯,經...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了色乾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片誊册。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖暖璧,靈堂內的尸體忽然破棺而出案怯,到底是詐尸還是另有隱情,我是刑警寧澤澎办,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布嘲碱,位于F島的核電站,受9級特大地震影響局蚀,放射性物質發(fā)生泄漏麦锯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一琅绅、第九天 我趴在偏房一處隱蔽的房頂上張望扶欣。 院中可真熱鬧,春花似錦千扶、人聲如沸料祠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽髓绽。三九已至,卻和暖如春妆绞,著一層夾襖步出監(jiān)牢的瞬間顺呕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工括饶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留株茶,地道東北人。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓巷帝,卻偏偏與公主長得像忌卤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子楞泼,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內容