HTML DOM学习笔记:Document类型

Document 类型

在JavaScript中Document类型表示文档,我们常用的document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面;document对象还是window对象的一个属性,因此可以将其作为全局对象来访问.

特征

  • nodeType值为9
  • nodeName为”#document”
  • nodeValue为null
  • parentNode为null
  • ownerDocument为null
  • 子节点可能是一个DocumentType(最多一个),Element(最多一个),ProcessingInstruction或Comment

Document类型可以表示HTML页面或者其他基于XML的文档,不过最常见的应用还是作为HTMLDocument实例的document对象.通过该对象,我们可以获取页面有关信息,操作页面的外观,以及其底层结构.

文档子节点

虽然DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessingInstruction或Comment,但是还有两个内置的访问其子节点的快捷方式.
一:documentElement属性-始终指向HTML页面中的<html>元素
二:childNodes列表
并且如下代码所示

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

可见documentElement,firstChild,childNodes[0]指向同一个元素<html>

并且作为HTMLDocument的实例,还有一个body属性,直接指向<body>元素.

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

DocumentType节点(不重要)

<!DOCTYPE>节点可以通过document.doctype属性获取并访问它的信息.
以下是各浏览器支持差别:

  • IE8及之前:存在文档类型声明,会错误解释为一个注释并把它当作Comment节点;而document.doctype 值始终为null
  • IE9+及firefox:如果存在文档类型声明,则会将其作为文档第一个子节点;document.doctype是一个DocumentType节点,也可以通过document.firstChild或document.childNodes[0]访问.
  • Safari,Chrome和Opera:如果存在文档类型声明,则会将其解析,但不作为文档子节点,document.doctype是一个DocumentType节点,但该节点不存在于document.childNodes中.

Comment(不重要)

1
2
3
4
5
6
<!-- 注释1 -->
<html>
<body>
</body>
</html>
<!-- 注释2 -->

对于上述注释也在不同浏览器中存在不同.

  • IE8及之前,Safari3.1及更高,Opera和chrome:只为第一条注释创建节点,部位第二条注释创建节点.
  • IE9+:将第一条注释创建为document.childNodes中的一个注释节点,也将第二条注释创建为document.childNodes中的注释子节点
  • Safari3.1之前,firefox:完全忽略

以上的不一致性导致了无论是注释还是DocumentType节点对于我们来说用处十分有限.

文档信息

document对象有属性提供了document对象所表现的网页的一些信息.

  • title:包含在<title>元素中的文本(浏览器窗口的标题栏或标签页上),但是修改该值不会改变<title>元素.

  • URL:包含页面完整的URL

  • domain:包含页面的域名
  • referrer:保存链接到当前页面的那个页面的URL,如无来源页面则为空字符串.
    注意!:这些信息都存在于HTTP头部,只不过我们能通过该属性在JS中访问它们.而且我们只能在遵守规则(不能将这个属性设置为URL中不包含的域,不能将域缩紧如将wrox.com设置为p2p.wrox.com一样(IE8及之后))的情况下设置domain属性.
    其中domain属性还是越过跨域安全限制的好办法.

查找元素

主要用到document对象以下方法.

1
2
3
4
5
6
7
getElementById("id") //接受一个参数,如果找到相应元素则返回该元素,不存在则返回null
//注意!:IE8及较低版本不区分ID大小写/如果存在多个ID则只返回第一次出现的/IE7及较低版本中name值与ID匹配的表单元素会被返回
getElementsByTagName("img") //接受一个参数,为要取得元素的标签名,返回一个NodeList(包含零或多个元素).在HTML文档中,这个方法返回一个HTMLCollection对象,该对象与NodeList非常类似
getElementsByName("name") //只有HTMLDocument类型才有的方法.和上述两个方法相似,也就不解释传入参数之类的啦

HTMLCollection对象

元素数量可以通过length获得,而且我们可以通过.item()和方括号语法[0]/["name特性"]来访问元素.namedItem()方法则可以通过name特性取得其中的元素.

特殊集合

除了属性和方法,document对象还有一些特殊集合.这些集合都是HTMLCollection对象,为访问文档常用部分提供了快捷方式,如下:

  • document.anchors 包含文档中所有带name特性的<a>元素
  • document.applets 包含文档中所有的<applet>元素(已不再推荐使用)
  • document.forms 包含文档中所有<form>元素
  • document.images 包含文档中所有<img>元素
  • document.links 包含文档中所有带href特性的<a>元素
    该集合始终可以通过HTMLDocument对象访问到.而且是动态的随着当前文档内容的更新而更新.

DOM一致性(分级)

document.implementation属性就是用在检测浏览器实现了DOM的哪些部分.
document.implementation.hasFeature()方法接受两个参数,要检测的DOM功能名称和版本号,如果浏览器支持则返回true.但是这并不代表着实现与规范一致

文档写入

document对象有一个存在很久的功能,将输出流写入到网页中的能力.这关乎到下列4个方法.

  • write()
  • writeln()
    上面两个方法都是接受一个字符串参数,writeln()额外在字符串写入后再写入一个换行符
    注意!:如果要用于写入<script></script>则要对</script>进行转义=><\/script>,防止script标签被提前闭合导致无法执行;如果在文档接在结束后再调用则会导致整个页面重写.
  • open()
  • close()
    上述两个方法用于打开和关闭网页的输出流,如果在页面加载期间使用write()和writeln()则不需要用到这两个方法(严格型的XHTML文档不支持文档写入)