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()方法，则不需要用到这两个方法。

DOM-Document类型的更多相关文章

  1. js DOM Document类型

    JavaScript通过Document类型访问文档.在浏览器中,document对象是HTMLDocument(继承自 Document类型)的一个实例,表示整个HTML页面.document对象是 ...

  2. DOM Document节点类型详解

    在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...

  3. 从原型链看DOM－－Document类型

    JavaScript通过Document类型表示文档,原型链的继承关系为:document.__proto__->HTMLDocument.prototype->Document.prot ...

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

    Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...

  5. 第十章—DOM(一)——Document类型

    DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...

  6. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

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

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  8. DOM Document

    1.DOM Document对象 定义:每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. Docume ...

  9. DOM (Document Object Model)文档对象模型

    [理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...

  10. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

随机推荐

  1. 基础2.Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

  2. JS写入日志

    try { var WSShell = WScript.CreateObject("WScript.Shell"); var FileSys = WScript.CreateObj ...

  3. 删除mysql中root用户恢复方法

    1.# service mysqld stop  #停止mysql数据库服务 2.# service mysqld start --skip-grant-tables #跳过授权表启动mysql数据库 ...

  4. 关于.9.png格式图片的制作与使用

    .9.png图片其实就是png格式图片,不过它比普通的png图片外围多了1px(像素)的边框,另外就是使用这种格式的图片可以实现背景自适应大小且不失真的效果. 制作使用步骤: 1.制作属于你自己的pn ...

  5. div 添加滚动条

    <div id="dic" style="overflow:auto">

  6. CentOS 6.5 安全加固及性能优化 (转)

    通过修改CentOS 6.5 的系统默认设置,对系统进行安全加固,进行系统的性能优化. 环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5- ...

  7. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  8. python 使用__neg__和__iter__

    __neg__ python中 __neg__ 方法对应于 符号 - 可见 str 没有__neg__,定义 strnew 好吧,无法再简化了 __iter__ 看看 list 的 __iter__: ...

  9. vim的配置与使用

    经历了一次source insight 一言不合就崩溃之后,决定还是花点时间好好配置和学习以下vim 于是找到大神的配置 https://github.com/humiaozuzu/dot-vimrc ...

  10. Centos 6.5 搭建l2tp 服务端和客户端

    废话不多说直接上步骤. server #epel仓库愿安装 rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release- ...