zoukankan      html  css  js  c++  java
  • Javascript高级编程学习笔记(36)—— DOM(2)Document

    Documet类型

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

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

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

    JS通过Document类型来表示文档

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

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

    具有以下特征:

    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 之前可能会有注释节点

    所以如果需要访问 <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  接收一个字符串,将字符串末尾添加 换行后写入页面

    3、open 打开网页输出流

    4、close  关闭网页输出流

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

  • 相关阅读:
    .XamlReader.Load()解决给定编码中的字符无效与无法创建未知类型
    ie中jQuery无法解析xml文件的解决方案[转帖]
    关于BI
    关天response.setContentType()和application/json
    win7 exe程序icon消失
    关于spring的p标签(转)
    人生的阶段(转)
    Firefox高版本中alert样式问题
    IDM606注册
    Java 线程池
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10238352.html
Copyright © 2011-2022 走看看