JavaScript文档对象模型(DOM)——节点层次Document类型

Document类型

JavaScript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML也页面。而且,document对象是window对象的一个属性,可以作为全局对象来访问。Document节点具有下列特征:

  • nodeType的值为9
  • nodeName的值为"#document"

  • nodeValue的值为null

  • parentNode的值为null

  • ownerDocument的值为null

  • 其节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。
    Document类型可以表示HTML页面或其他基于XML的文档。最常见的应用还是作为HTMLDocument实例的document对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。

  • 1.文档的子节点
    documentElement和childNodes内置的访问文档子节点的快捷方式。
    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另一个可能的子节点是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应用,就是取得特定的某个或某租元素的引用,然后在执行一些操作。
    Document类型为此提供了两个方法:getElemengById()和getElementsByTagName()。

getElemengById()接收一个参数,要取得的元素的ID。找到相应元素放回该元素,否则返回null。如果页面中多个元素的ID值相同,则返回文档中第一次出现的元素。

getElementsByTagName()接收一个参数,要取得的元素的标签名,返回0或多个元素的NodeList。在HTML文档中,这个方法会返回一个HTMLCollection对象,最为一个动态集合,该对象与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规定了一个方法,hasFeature(),这个方法接受两个参数,要检测的DOM功能名称即版本号。
              var hasXmlDom = document.implementation.hasFeature("XML","1.0");

在使用DOM的某个特殊功能之前,最好处理检测hasFeature之外,还同时使用能力检测。

  • 6.文档写入

document对象将输出流写入到网页中的能力体现在下列4个方法中:write()、writeln()、open()和close()。write()、writeln()接收一个字符串参数,要写入到输出流中的文本。write()原样写,writeln()会在字符串末尾添加换行符(\n)。在页面加载过程中,可以使用这两个方法项页面中动态加入内容。
open()和cloes()分别打开和关闭网页的输出流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容