Document 类型

JavaScript 通过 Document 类型表示文档。在浏览器中， document 对象是 HTMLDocument （继承自 Document 类型）的一个实例，表示整个 HTML 页面。而且， document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。

Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过，最常见的应用还是作为HTMLDocument 实例的 document 对象。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。

在 Firefox、Safari、Chrome 和 Opera 中，可以通过脚本访问 Document 类型的构造函数和原型。 但在所有浏览器中都可以访问 HTMLDocument 类型的构造函数和原型，包括 IE8及后续版本。

虽然 DOM 标准规定 Document 节点的子节点可以是 DocumentType 、 Element 、 ProcessingIn-

struction 或 Comment ， 但还有两个内置的访问其子节点的快捷方式。 第一个就是 documentElement属性， 该属性始终指向 HTML 页面中的 <html> 元素。 另一个就是通过 childNodes 列表访问文档元素，但通过 documentElement 属性则能更快捷、更直接地访问该元素。

如下所示：

<html>

<body>

</body>

</html

页面在经过浏览器解析后，其文档中只包含一个子节点，即 <html> 元素。可以通过documentElement 或 childNodes 列表来访问这个元素，即：

var html = document.documentElement; //取得对<html>的引用

alert(html === document.childNodes[0]); //true

alert(html === document.firstChild); //true

例子说明， documentElement 、 firstChild 和 childNodes[0] 的值相同，都指向 <html>元素。

作为 HTMLDocument 的实例， document 对象还有一个 body 属性，直接指向 <body> 元素。

var body = document.body; //取得对<body>的引用

所有浏览器都支持 document.documentElement 和 document.body 属性。

Document 另一个可能的子节点是 DocumentType，但是由于浏览器对 document.doctype 的支持不一致，因此这个属性的用处很有限。

文档信息

作为 HTMLDocument 的一个实例， document 对象还有一些标准的 Document 对象所没有的属性,这些属性提供了 document 对象所表现的网页的一些信息。比如属性 title ，包含着<title> 元素中的文本——显示在浏览器窗口的标题栏或标签页上。 通过这个属性可以取得当前页面的标题， 也可以修改当前页面的标题并反映在浏览器的标题栏中。

介绍3个与网页请求有关的属性，它们是 URL 、domain 和 referrer 。 URL 属性中包含页面完整的 URL（即地址栏中显示的 URL） ， domain 属性中只包含页面的域名，而 referrer属性中则保存着链接到当前页面的那个页面的 URL。在没有来源页面的情况下， referrer 属性中可能会包含空字符串。所有这些信息都存在于请求的 HTTP 头部，只不过是通过这些属性让我们能够在JavaScrip 中访问它们而已，

如下所示：

//取得完整的 URL

var url = document.URL;

//取得域名

var domain = document.domain;

//取得来源页面的 URL

var referrer = document.referrer;

URL 与 domain 属性是相互关联的。如果 document.URL 等于http://www.wrox.com/WileyCDA/，

那么 document.domain 就等于 www.wrox.com。

在这 3 个属性中，只有 domain 是可以设置的。但由于安全方面的限制，不能将这个属性设置为 URL 中不包含的域。

//假设页面来自 p2p.wrox.com 域

document.domain = "wrox.com"; // 成功

document.domain = "nczonline.net"; // 出错！

当页面中包含来自其他子域的框架或内嵌框架时，能够设置 document.domain 就非常方便了。由于 跨 域 安 全 限 制 ， 来 自 不 同 子 域 的 页 面 无 法 通 过 JavaScript 通 信 。 而 通 过 将 每 个 页 面 的document.domain 设置为相同的值，这些页面就可以互相访问对方包含的 JavaScript 对象了。

假设有一个页面加载自 www.wrox.com，其中包含一个内嵌框架，框架内的页面加载自 p2p.wrox.com。

由于 document.domain 字符串不一样，内外两个页面之间无法相互访问对方的 JavaScript 对象。但如

果将这两个页面的 document.domain 值都设置为 "wrox.com" ，它们之间就可以通信了。

浏览器对 domain 属性还有一个限制，即如果域名一开始是“松散的” （loose） ，那么不能将它再设

置为“紧绷的” （tight） 。换句话说，在将 document.domain 设置为 "wrox.com" 之后，就不能再将其设置回 "p2p.wrox.com" ，否则将会导致错误。

查找元素

Document 类型为此提供了两个方法： getElementById() 和 getElementsByTagName()。

getElementById() 如果找到相应的元素则返回该元素，如果不存在带有相应 ID 的元素，则返回 null，如果页面中多个元素的 ID 值相同，只返回文档中第一次出现的元素。

getElementsByTagName() 在 HTML 文档中，这个方法会返回一个 HTMLCollection 对象，作为一个“动态”集合，该对象与 NodeList 非常类似。

与 NodeList 对象类似，可以使用方括号语法或 item() 方法来访问 HTMLCollection 对象中的项。 而这个对象中元素的数量则可以通过其 length 属性取得。

如下所示：

var images = document.getElementsByTagName("img");

alert(images.length); //输出图像的数量

alert(images[0].src); //输出第一个图像元素的 src 特性

alert(images.item(0).src); //输出第一个图像元素的 src 特性

假设上面的页面中包含如下 <img> 元素：<img src="myimage.gif" name="myImage">，则可以

var myImage = images.namedItem("myImage");

var myImage = images["myImage"];

要想取得文档中的所有元素，可以向 getElementsByTagName() 中传入 "*" 。在 JavaScript 及 CSS

中，星号（ * ）通常表示“全部” 。

如 var allElements = document.getElementsByTagName("*");返回整个页面中的所有节点元素。

getElementsByName()只有 HTMLDocument 才有的方法， 这个方法会返回带有给定 name 特性的所有元素。

特殊集合

除了属性和方法， document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象，为访问文档常用的部分提供了快捷方式：

document.anchors ，包含文档中所有带 name 特性的 <a> 元素；

document.applets ，包含文档中所有的 <applet> 元素，因为不再推荐使用 <applet> 元素，所以这个集合已经不建议使用了；

document.forms ， 包含文档中所有的 <form> 元素， document.getElementsByTagName("form")

得到的结果相同；

q document.images ，包含文档中所有的 <img> 元素，与 document.getElementsByTagName

("img") 得到的结果相同；

q document.links ，包含文档中所有带 href 特性的 <a> 元素。

DOM 一致性检测

由于 DOM 分为多个级别，也包含多个部分，因此检测浏览器实现了 DOM 的哪些部分就十分必要

了。 document.implementation 属性就是为此提供相应信息和功能的对象，与浏览器对 DOM 的实现直接对应。DOM1 级只为 document.implementation 规定了一个方法，即 hasFeature() 。这个方法接受两个参数：要检测的 DOM 功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该方法返回 true 。如下所示：

var hasXmlDom = document.implementation.hasFeature("XML", "1.0");

下表列出了可以检测的不同的值及版本号：

尽管使用 hasFeature() 确实方便，但也有缺点。因为实现者可以自行决定是否与 DOM 规范的不

同部分保持一致。即返回 true有时候也不意味着实现与规范一致

文档写入

将输出流写入到网页中的能力，体现在下列 4 个方法中： write() 、 writeln() 、 open() 和 close() 。

其中， write() 和 writeln()方法都接受一个字符串参数，即要写入到输出流中的文本。 write() 会原样写入，而 writeln() 则会在字符串的末尾添加一个换行符（ \n ） 。在页面被加载的过程中，可以使用这两个方法向页面中动态地加入内容。

如下所示：

<html>

<head>

<title>document.write() Example</title>

</head>

<body>

<p>The current date and time is:

<script type="text/javascript">

document.write("<strong>" + (new Date()).toString() + "</strong>");

</script>

</p>

</body>

</html>

此外，还可以使用 write() 和 writeln() 方法动态地包含外部资源，例如 JavaScript 文件等。如：

<html>

<head>

<title>document.write() Example 3</title>

</head>

<body>

<script type="text/javascript">

document.write("<script type=\"text/javascript\" src=\"file.js\">" +"<\/script>");

</script>

</body>

</html>

字符串 "<\/script>" 不会被当作外部 <script> 标签的关闭标签，因而页面中也就不会出现多余的内容了。

方法 open() 和 close() 分别用于打开和关闭网页的输出流。 如果是在页面加载期间使用 write()或 writeln() 方法，则不需要用到这两个方法。

第10章 文档对象模型DOM 10.2 Document类型的更多相关文章

  1. 第10章 文档对象模型DOM 10.1 Node节点类型

    DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始 ...

  2. 第10章 文档对象模型DOM 10.3 Element类型

    Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回 ...

  3. JavaScript编程：文档对象模型DOM

    5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...

  4. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  5. 文档对象模型DOM通俗讲解

    转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...

  6. 文档对象模型DOM

    文档对象模型 DOM 1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 提供给用户操作document obj 的标准接口 文档对象模型 是表示和操作 H ...

  7. 文档对象模型DOM(二)

    练习: 要求:界面上有个登录按钮,点击登录的时候,界面中弹出一个登录的方框,点击登录方框中的×的,登录方框消失. <!DOCTYPE html> <html> <head ...

  8. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

  9. 文档对象模型DOM（一）

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 每加载一个标记 注释 或者属性,就将其当 ...

随机推荐

  1. Flutter学习笔记（13）--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  2. ASP.NET Core Identity自定义数据库结构和完全使用Dapper而非EntityFramework Core

    前言 原本本节内容是不存在的,出于有几个人问到了我:我想使用ASP.NET Core Identity,但是我又不想使用默认生成的数据库表,想自定义一套,我想要使用ASP.NE Core Identi ...

  3. java的properties文件从数据库添加到文件

    package com.xian.jdbc; import java.io.BufferedInputStream; import java.io.FileInputStream; import ja ...

  4. RocketMQ中Broker的消息存储源码分析

    Broker和前面分析过的NameServer类似,需要在Pipeline责任链上通过NettyServerHandler来处理消息 [RocketMQ中NameServer的启动源码分析] 实际上就 ...

  5. 理解分布式一致性与Raft算法

    理解分布式一致性与Raft算法 永远绕不开的CAP定理 出于可用性及负载方面考虑,一个分布式系统中数据必然不会只存在于一台机器,一致性简单地说就是分布式系统中的各个部分保持数据一致 但让数据保持一致往 ...

  6. 多态、继承、this、super

    先放一下多态的定义: (360词典上的哈) 多态(Polymorphism)按字面的意思就是"多种状态".在面向对象语言中,接口的多种不同的实现方式即为多态.引用Charlie C ...

  7. Java虚拟机(二)-对象创建

    这一篇大致说明一下,对象在Java堆中对象分配.内存布局以及访问定位 1.对象的创建 虚拟机在遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引 ...

  8. 使用ArrayPool池化大型数组（翻译）

    原文链接:https://adamsitnik.com/Array-Pool/ 使用ArrayPool 简介 .NET的垃圾收集器(GC)实现了许多性能优化,其中之一就是,设定年轻的对象很快消亡,然而 ...

  9. Missing artifact XXXXX:jar:1.9.1 解决错误问题

    昨天导过来一个maven工程的一个项目,由于自己meven库中有许多现成的jar包,但是还是有一些需要去下载的,配置的是阿里云的镜像,把eclise的预编译给关闭,具体做法为:Project----- ...

  10. RecyclerView实现混合布局

    PS:好长时间不写博客了,起初是不知道写些什么,后来接触了到了很多东西,原本看似简单的东西,背后都隐藏着巨大的秘密,想handler的使用,一般情况下会引起内存泄漏问题,想着找到方法结局不就得了吗,可 ...