DOM-Document类型

Document类型

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

nodeType的值为9
nodeName的值为“#document”
nodeValue的值为null
parentNode的值为null
ownerDocument的值为null
其子节点可能是一个DocumentType、Element、ProcessingInstruction或者Comment

1、文档的节点

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

1          <html>
2              <body>
3
4              </body>
5          </html>
6
7          var html = document.documentElement;
8          console.log(html === document.childNOdes[0]); //true
9          console.log(html === document.firstChild); //true

document对象还有一个body属性,直接指向<body>元素。

1 var body = document.body;

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

通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体,可以通过doctype属性来访问他的信息

1 var doctype = document.doctype;

浏览器对document.doctype的支持差别很大

2、文档信息

作为HTMLDocument的一个实例,document对象还有一些标准的Document对象所没有的属性。其中第一个属性就是title,包含着<title>中的文本,可以修改当前页面的标题并反映在浏览器的窗口中

1         //取得文档标题
2         var originalTitle = document.title;
3         //设置文档标题
4         document.title = "New page title";

URL、domain和referrer都和页面的请求有关,URL属性中包含完整的URL(即地址栏中的URL)。domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下,referrer属性中可能会包含空字符串。

URL和doamin属性是相互关联的。例如,如果document.URL等于http://www.wrox.com/WileyCDA/,那么document.domain就等于www.wrox.com。

在这三个属性中,只有domain属性可以设置。由于安全的方面的限制,如果URL中包含一个子域名,例如p2p.wrox.com,那么就只能将domain设置为"wrox.com"。

3、查找元素

Document类型提供了两个方法:getElementById()和getElementsByTagName()

getElementById(),接受一个参数:要取得元素的ID,如果找不到匹配的元素返回null,如果页面中有多个相同的ID,则返回第一次出现的元素。

getElementsByTagName(),接受一个参数即要取得元素的标签名,而返回的是包含零或多个元素的Nodelist。在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个“动态”集合,改对象与Nodelist非常类似。

1         var images = document.getElementsByTagName(‘img‘);

这行代码会将一个HTMLCollection对象保存在images变量中。与Nodelist对象类似,可以使用方括号语法或item()方法来访问HTMLCollection对象中的项。而这个对象中元素的数量可以通过length属性取得。

1         console.log(images.length);//输出图像的数量
2         console.log(images.item(0).src);//输出第一个图像的src属性
3         console.log(images[0].src);//输出第一个图像的src属性

HTMLCollection对象还有一个方法,叫做namedItem(),使用这个方法可以通过元素的name特性取得集合中的项

1         <img src="myimages.jpg" name="myImages" />
2         var myImages = document.namedItem(‘myImages‘);

在提供按索引访问项的基础上,HTMLCollention还支持按名称访问项。而且对命名的项也可以使用方括号语法来访问,例如:

1 var myimage = images[‘myImages‘];

要想取得文档中的所有元素,可以向getElementsByTagName()中传入"*"。第一项是<html>元素,第二项是<head>元素,以此类推。

第三个方法,也是只有HTMLCollection类型才有的方法,是getElementsByName()。这个方法会返回带有给定name特性的所有元素。最常是有这个方法的情况是取得单选按钮

4、特殊集合

document.anchors,包含文档中所有带name特性的<a>元素,以此类推。
document.applets,包含文档中所有<applet>元素。
document.forms,包含文档中所有的<form>元素,与document.getElementsByTagName(‘form‘)得到的结果相同
document.images,包含文档中所有<img>元素,与document.getElementsByTagName(‘img‘)得到的结果相同
document.links,包含文档中所有带href特性的<a>元素。

这个特殊集合始终都可以通过HTMLDocument对象访问到,而且,与HTMLCollection对象类似,集合中的项也会随着当前文档内容的更新而更新。

5.DOM一致性检测

由于DOM分为多个级别,也包含多个部分,因此检测浏览器实现了DOM的哪些部分就十分必要了。document.implementation属性就是为此提供相应信息和功能的对象,与浏览器对DOM的实现直接对应。DOM1级只为document.implementation规定了一个方法,即hansFrature()。这个方法接受两个参数:要检测的DOM功能的名称以及版本号。如果浏览器支持给定的名称和版本的功能,则该方法返回true,例如:

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

6、文档的写入

有一个document对象的功能已经存在很多年了,那就是将输出流写入到网页中的能力。这个能力体现在下列4个方法中:weite()、writeln()、open()和close()。其中,write()和writeln()方法都接受一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符串末尾添加一个换行符(\n)。例如:

 1             <html>
 2             <head>
 3             <title>document.write() Example</title>
 4             </head>
 5             <body>
 6                 <p>The current data and  time is:
 7                 <script type="text/javascript">
 8                     document.write("<strong>" + (new Date()).toString() + "</strong>");
 9                 </script>
10                 </p>
11             </body>
12             </html>

此外还可以使用write()和writeln()方法动态的包含外部资源,例如JavaScript文件等。注意:不能像下面的例子那样直接包含字符串"</script>",因为这会导致该字符串被解释为脚本块的结束,它后面的代码将无法执行。

 1             <html>
 2             <head>
 3             <title>document.write() Example2</title>
 4             </head>
 5             <body>
 6                 <script type="text/javascript">
 7                     document.write("<script type=\"text/javascript\" src=\"file.js\">" + "</script>");
 8                 </script>
 9             </body>
10             </html>

即使这个文件看起来没错,但字符串"</script>"将被解释为与外部的<script>标签匹配。为避免这个问题,只需加入转义字符/即可。解决方案如下:

 1             <html>
 2             <head>
 3             <title>document.write() Example2</title>
 4             </head>
 5             <body>
 6                 <script type="text/javascript">
 7                     document.write("<script type=\"text/javascript\" src=\"file.js\">" + "<\/script>");
 8                 </script>
 9             </body>
10             </html>

前面的例子使用document.write()在页面被呈现的过程中直接向其中输出了内容。如果在文档加载结束后再调用document.write(),那么输出的内容将会重写整个页面。

 1             <html>
 2             <head>
 3             <title>document.write() Example</title>
 4             </head>
 5             <body>
 6                 <p>This is some context that you won‘t get to see because it will be overwritten.</p>
 7                 <script type="text/javascript">
 8                     window.onload = function(){
 9                         document.write("Hello world!");
10                     };
11                 </script>
12             </body>
13             </html>

等到页面完全加载之后延迟执行函数。函数执行之后,字符串"Hello world!"会重写这个页面内容

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

时间: 2024-10-13 21:53:34

DOM-Document类型的相关文章

[10.DOM]Document类型

document对象是HTMLDocument的一个实例,表示整个html页面.document对象是window对象的一个属性,因此可以将其作为全局对象访问. 文档的子节点 <html>的引用:document.documentElement <body>的引用:document.body 文档信息 网页标题:document.title 当前页url:document.URL 当前页域名:document.domain 来源页的url:document.referrer 查找元

从原型链看DOM--Document类型

JavaScript通过Document类型表示文档,原型链的继承关系为:document.__proto__->HTMLDocument.prototype->Document.prototype->Node.prototype->EventTarget.prototype Document节点具有下列特征:以下属性均为Node.prototype上的 nodeType值为9 nodeName值为"#document" nodeValue值为null pare

Document类型[第10章-文档对象模型DOM 笔记2]

Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 类型可以表示 HTML 页面或者其他基于 XML 的文档.不过,最常见的应用还是作为HTMLDocument 实例的 document 对象.通过这个文档对象,不

JavaScript DOM(二)之Document类型

Document类型简介 javaScript通过Document类型表示文档:因此我们称document 为文挡对象,在浏览器中, document对象是HTMLDocument的一个实例,表示整个HTML页面,而且,document对象是window对象的一个属性,因为可以作为一个全局对象来访问: Document类型特征 1:nodeType的值为9; 2:nodeName的值为"#document"; 3:nodeValue的值为null; 4:parentNode的值为nul

第10章 文档对象模型DOM 10.2 Document类型

Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 类型可以表示 HTML 页面或者其他基于 XML 的文档.不过,最常见的应用还是作为HTMLDocument 实例的 document 对象.通过这个文档对象,不

Document类型

1.文档的子节点 Document类型可以表示HTML页面或者其他基于XML的文档.不过,最常见的应用还是作为HTMLDocument实例的document对象.通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构. 虽然DOM标准规定Document节点的子节点可以是DocumentType.Element.ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式.第一个就是documentElement属性,该属性始终指

DOM Document

1.DOM Document对象 定义:每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问. ⑴Document对象集合: all[] 提供对文档中所有 HTML 元素的访问. anchors[] 返回对文档中所有 Anchor 对象的引用. applets 返回对文档中所有 Applet

javascript中12种DOM节点类型概述

× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DO

JS魔法堂:那些困扰你的DOM集合类型

一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = document.getElementsByName('dummyName'); var node = nodes.namedItem('id'); 答案是两种都有可能哦!document.getElementsByName在Chrome和FF30.0中返回NodeList(木有namedItem方法的),在IE

深入理解DOM节点类型第一篇——12种DOM节点类型概述

前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成.本文将主要说明DOM节点类型 总括 一般地,节点至少拥有nodeType.node