Javascript高级编程学习笔记（36）—— DOM（2）Document

时间：2023-01-19 19:46:11

Documet类型

了解了基础的Node类型过后，我们来聊聊Node中的Document类型

我们知道所有的节点都继承自Node类型

所以除了Node类型公有的方法和类型之外，Document类型还有一些自己的特性

JS通过Document类型来表示文档

在浏览器中 document 对象是 HTMLDocument 的一个实例（继承自Document类型）

表示整个 HTML 页面，且 document 对象是 window 对象的一个属性所以可以作为全局对象访问

Javascript高级编程学习笔记（36）—— DOM（2）Document

具有以下特征：

1、nodeName：#document

2、nodeValue：null

3、parentNode：null

4、nodeType：9

5、ownerDocument：null

文档的子节点

DOM标准规定 Document 节点的子节点可以是

1、DocumentType（文档类型声明）

2、Element

3、ProcessingInstruction

4、Comment

通过documentElement属性可以更快地访问 document 的子节点

该属性始终指向页面中的<html>

也可以通过 childNodes 来访问页面中的<html>

但是有些时候在 html 之前可能会有注释节点

Javascript高级编程学习笔记（36）—— DOM（2）Document

所以如果需要访问 <html> 最好还是使用 document.documentElement 来访问

JS中document 还有个 body 属性用于访问 <body> 节点

doctype 属性用于访问 <!DOCTYPE html> 也就是文档类型声明，但是不同浏览器在该属性上的差异较大，所以不推荐使用

具体差异在：

1、IE8以下始终为null，会将其解析为注释节点

2、IE8以上若存在，会将其作为document 的第一个子节点

3、在非IE浏览器中，该属性会正确指向文档声明，但是不会出现在 childNodes 中

关于注释节点，不同浏览器的解析也存在着较大的差异

所以 <html> 外部的注释节点作用极为有限

文档信息

document 作为 HTMLDocument 的实例，document 对象还有一些标准的 Document 对象所没有的属性

1、title 指向页面中的 <title> 内容，通过修改该值可以修改页面的标题

2、URL  包含页面完整的 URL地址（即显示在地址栏中的内容）

3、domain  页面的域名

4、referrer  来源url 通常为空，只有重定向的页面有该值

后面三个属性中只有 domain 可以设置值，但是只能设置为 URL 中包含的域名，也就是子域名

并且还有一个限制，一旦将其设置为子域名就不能再设回父域名，也就是只能设置为当前domain的子域名

查找元素

Dom操作中最基础，也是最重要的功能就是查找元素了

该操作可以通过 document 对象的几个方法来完成

Document提供的方法：

1、getElementById（） // 传入元素ID，返回第一次匹配的元素，IE8以下不区分ID的大小写，IE7以下有个bug 若在 ID元素的前面，有个表单元素的name与ID一致则会返回这个表单元素

2、getElementsByTagName（） // 传入标签名，返回一个包含（0或多个元素的）NodeList，在HTML文档中会返回一个 HTMLCollection 对象，可以传入 * 以获取全部元素，html不区分大小写，XML区分

PS、HTMLCollection 和 NodeList 类似，也是一个“动态” 的集合，该集合提供两个方法用以访问其中的元素

　　1、item（）传入元素索引

　　2、namedItem（） 通过元素的name特性进行索引

并且如果对 HTMLCollection 使用方括号的方式进行访问，在后台仍旧调用的是 item 方法

还有一点需要注意，IE在实现上将注释节点实现为元素，所以在使用* 获取所有元素时也会获取到注释节点

HTMLDocument提供的方法：

getElementsByName （） 查找具有特定name的元素

与getElementByTagName 类似该方法返回一个 HTMLCollection

不过对于结果调用 namedItem 只会返回第一个，因为所有结果的name都是一样的

特殊集合

document 对象还有一些特殊集合，为访问文档的常用部分提供了便利

这些集合都是 HTMLCollection

document.anchors  所有有name的a标签的集合

document.forms  文档中的所有 <form>

document.images  文档中所有的<img>

document.links 文档中所有有href属性的a标签

DOM一致性检测

由于DOM分为多个级别，所以检测浏览器具体实现了哪些就是一个十分必要的过程

document.implementation属性为此提供了相应的功能和对象

DOM1中只为其提供了一个方法 hasFeature

该方法需要两个参数，第一个是需要检测的功能，第二个参数是该功能的版本号，两个参数都为字符串串形式

可以检测的功能有以下值：

1.Core // 基本DOM

2.XML // Core的XML拓展

3.HTML  // XML对HTML的拓展

4.Views // 样式的文档格式化

5.StyleSheets // 将样式表关联到文档

6.CSS // 对层叠样式表1级的支持

7.CSS2 // 对层叠样式表2级支持

8.Events // 常规DOM事件

9.UEvents // 用户界面事件

10.MouseEvents // 鼠标事件

11.MutationEvents // DOM树变化时的事件

12.HTMLEvents // HTML4.01的事件

13.Range // 对范围操作的支持

14.Traversal // 遍历DOM树的方法

15.LS // 文件与DOM树的同步加载与保存

16.LS-Async // 文件与DOM树之间的异步加载与保存

17.Validation // 确保有效的前提下修改DOM树的方法

PS.由于这里的属性值，由浏览器厂商设置，所以很可能不准确，所以需要能力检测与之配合使用

文档写入

document 对象还有一个十分重要的功能，那就是将输出流写入到网页中的能力

提供了4个方法：

1、write  接收一个字符串，将其原样写入到网页中

2、writeln  接收一个字符串，将字符串末尾添加 \n 换行后写入页面

3、open 打开网页输出流

4、close  关闭网页输出流

如果页面加载完成，那么输出的内容将会重写整个页面

Javascript高级编程学习笔记（36）—— DOM（2）Document的更多相关文章

  1. Javascript高级编程学习笔记（49）—— DOM2和DOM3（1）DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  2. Javascript高级编程学习笔记（37）—— DOM（3）Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  3. Javascript高级编程学习笔记（35）—— DOM（1）节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  4. Javascript高级编程学习笔记（71）—— 模拟事件（1）DOM事件模拟

    事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...

  5. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  6. Javascript高级编程学习笔记（42）—— DOM（8）Attr类型

    Attr类型 我们在之前的文章中提到了,元素有一个 attributes 属性 该属性保存了一个 NamedNodeMap 集合 该集合中的元素也就是今天我们所要记叙的 attr 类型 主要就是方便我 ...

  7. Javascript高级编程学习笔记（41）—— DOM（7）DocumentFragment类型

    DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小 ...

  8. Javascript高级编程学习笔记（40）—— DOM（6）CDATASection、DocumentType

    CDATASection类型 CDATASection类型是只针对XML文档的类型 因为浏览器无法解析 在浏览器中创建CDATASection的函数也无法正常使用 该类型有以下属性 nodeType: ...

  9. Javascript高级编程学习笔记（39）—— DOM（5）Comment

    Comment类型 顾名思义,comment类型指的就是注释节点在HTML文档中的类型 也就是说平时我们在代码中的注释,在HTML解析的时候也会被解析为一类节点 让我们可以根据这些节点进行一系列的操作 ...

随机推荐

  1. WCF学习之旅—WCF服务的Windows 服务程序寄宿（十一）

    上接    WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) 七 WCF服务的Windows 服务程序寄宿 这种方式的服务寄宿,和IIS一样有一个一样 ...

  2. ARM伪指令&comma;王明学learn

    ARM伪指令 在ARM汇编语言程序中里,有一些特殊指令助记符与指令系统的助记符不同,没有相对应的操作码,通常称这些特殊指令助记符为伪指令,他们所完成的操作称为伪操作.伪指令在元程序中的作用是为完成汇编 ...

  3. 问题解决——在STL的queue中使用自定义类

    本文原创,转载请保证文章的完整性,并显要的注明出处. 本文链接:http://blog.csdn.net/wlsgzl/article/details/38843513 平时很少用STL,就算用,也基 ...

  4. PATH环境变量和CLASSPATH环境变量详解

    大凡装过JDK的人都知道要安装完成后要设置环境变量,可是为什么要设置环境变量呢?环境变量有什么作用? 1)PATH详解: 计算机安装JDK之后,输入“javac”“java”之类的命令是不能马上被计算 ...

  5. Javascript几种跨域方式总结

    在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...

  6. Apache Flume日志收集系统简介

    Apache Flume是一个分布式.可靠.可用的系统,用于从大量不同的源有效地收集.聚合.移动大量日志数据进行集中式数据存储. Flume简介 Flume的核心是Agent,Agent中包含Sour ...

  7. 对于python爬虫urllib库的一些理解（抽空更新）

    urllib库是Python中一个最基本的网络请求库.可以模拟浏览器的行为,向指定的服务器发送一个请求,并可以保存服务器返回的数据. urlopen函数: 在Python3的urllib库中,所有和网 ...

  8. 代理与hook

    参考:Java 动态代理 代理是什么 为什么需要代理呢?其实这个代理与日常生活中的“代理”,“中介”差不多:比如你想海淘买东西,总不可能亲自飞到国外去购物吧,这时候我们使用第三方海淘服务比如惠惠购物助 ...

  9. 使用IntelliJ IDEA开发java web

    前言:由于本人接触java语言时间还比较短,IDE工具eclipse还比较熟悉点,想试试用IntelliJ IDEA来开发java web项目来练练手! 一.下载安装篇 1.安装IntelliJ ID ...

  10. The Chinese Postman Problem HIT - 2739&lpar;有向图中国邮路问题&rpar;

    无向图的问题,如果每个点的度数为偶数,则就是欧拉回路,而对于一个点只有两种情况,奇数和偶数,那么就把都为奇数的一对点  连一条  边权为原图中这两点最短路的值  的边  是不是就好了 无向图中国邮路问 ...

相关文章