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页面中的元素。另一个就是通过childNodes列表访问文档元素,但通过documentElement属性更快捷

1          2

3 4              5          6 7          var html = document.documentElement;8          console.log(html === document.childNOdes[0]); //true9          console.log(html === document.firstChild); //true

document对象还有一个body属性,直接指向

元素。1 var body = document.body;

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

通常将标签看成一个与文档其他部分不同的实体,可以通过doctype属性来访问他的信息1 var doctype = document.doctype;

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

2、文档信息

作为HTMLDocument的一个实例,document对象还有一些标准的Document对象所没有的属性。其中第一个属性就是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         2         var myImages = document.namedItem('myImages');

在提供按索引访问项的基础上,HTMLCollention还支持按名称访问项。而且对命名的项也可以使用方括号语法来访问,例如:1 var myimage = images['myImages'];

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

元素,以此类推。

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

4、特殊集合

document.anchors,包含文档中所有带name特性的元素,以此类推。

document.applets,包含文档中所有元素。

document.forms,包含文档中所有的

元素,与document.getElementsByTagName('form')得到的结果相同

document.images,包含文档中所有元素,与document.getElementsByTagName('img')得到的结果相同

document.links,包含文档中所有带href特性的元素。

这个特殊集合始终都可以通过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              2

3             document.write() Example 4              5              6

The current data and  time is: 7                 10

11             12

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

1              2

3             document.write() Example2 4              5              6                 "); 8                  9             10

即使这个文件看起来没错,但字符串""将被解释为与外部的

1              2

3             document.write() Example2 4              5              6                  9             10

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

1              2

3             document.write() Example 4              5              6

This is some context that you won't get to see because it will be overwritten.

7                 12             13

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

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

html页面设置document类型,DOM-Document类型相关推荐

  1. Javascript之DOM(Document类型)

    JavaScript通过document类型表示文档.在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性. D ...

  2. EI文献类型(Document Type)

    作者在日常投稿EI 的时候常常好奇,为何同样是Ei Compendex检索收录, 还分不同EI文献类型(Document Type),到底都是怎么回事儿呢?为此,本文小编着重科普下EI文献类型,仅供大 ...

  3. html dom节点类型,浅谈Javascript中的12种DOM节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

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

    前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascrip ...

  5. HTML DOM教程 14-HTML DOM Document 对象

    HTML DOM教程 14-HTML DOM Document 对象 1:Document 对象 Document 对象代表整个 HTML 文档,可用来访问页面中的所有元素. Document 对象是 ...

  6. XML DOM 节点类型(Node Types)

    实例 在下面的例子中,我们将使用 XML 文件 books.xml,以及 JavaScript 函数 loadXMLDoc(). 显示所有元素的节点名称和节点类型 显示所有元素的节点名称和节点值 节点 ...

  7. JavaScript Document对象DOM

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

  8. Javascript之DOM(Element类型)

    访问元素的标签名 1 2 3 4 <div id="myDiv">text</div>    var div=getElementById("my ...

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

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

  10. DOM节点类型及其属性和方法

    目录 一.DOM介绍 二.DOM节点 1.节点层级 2.节点类型 3.节点树 三.节点类型的属性和方法 1.Node类型 1.1 属性 nodeType nodeName nodeValue text ...

最新文章

  1. JAVA通信系列三:Netty入门总结(转)
  2. Monkey测试2——Monkey测试策略
  3. asp.net Forums 之HttpHandler和HttpModule
  4. IDEA直接跳转到方法的实现类快捷键
  5. 无刷电调_新款好盈XR10 PRO G2电调搭载XRAY T4车架简评
  6. java netty和dubbo_Dubbo与Netty杂谈
  7. 重新编译mysqld_exporter0.10
  8. UE4之vs2019IntelliSense错误
  9. Bytom矿池接入协议指南
  10. BZOJ2425: [HAOI2010]计数
  11. c51单片机编程实例c语言,C51单片机C语言编程基础和实例
  12. 工业机器人电气系统拆装实训平台
  13. java三大特征_java三大特性是什么?
  14. 【Windows 11】终端美化配置(优化)
  15. promise is not a constructor
  16. 读书笔记: Cartesian Impedance Control of Redundant and Flexible-Joint Robots, Section 1
  17. 大数据分析原地踏步 原来是分析工具面临信任问题
  18. 编程技巧│提高 Javascript 代码效率的技巧
  19. Java Class
  20. 程序猿必备的数电知识之(逻辑代数基础后半篇)

热门文章

  1. SPL spl_autoload_register 初体验 (转)
  2. mysql之存储引擎的选择
  3. 微信jssdk,实现多图上传的一点心得
  4. 重点:怎样正确的使用QThread类(注:包括推荐使用QThread线程的新方法QObject::moveToThread)...
  5. Git的冲突解决过程
  6. winform C#的委托事件在winform窗体中传值,也可用于刷新另一窗体(窗体A刷新窗体B)...
  7. 如何解决Silverlight InitializeError #2103 - Invalid or malformed application: Check manifest
  8. 刚才遇到了关于C#使用外部DLL函数上的char*的问题。
  9. was web 服务器性能测试,was web 服务器性能测试
  10. 使用VIA声卡 运行生化危机5无声音的解决方案 无需卸载旧驱动