1、在浏览器中,ducument对象是HTMLDocument(继承至Document类型)的一个实例,表示整个HTML页面。
2、document对象是window对象的一个属性,因此可以将其作为全局对象来访问。
document节点特征
- nodeType的值是9;
- nodeName的值为“#document”;
- nodeValue的值为null;
- parentNode的值为null;
- ownerDocument的值为null;
- 其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。
文档的子节点
所有浏览器都支持document.documentElement和document.body属性。
documentElement属性
- documentElement属性:该属性始终指向HTML页面中的元素。(更快捷、更直接)
- childNodes属性:访问文档元素。
//这个页面经过浏览器解析后,其文档中只包含一个子节点,即元素。
var html = document.documentElement; //取得对的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
body属性
var body = document.body; //取得对的引用
doctype属性
var doctype = document.doctype; //取得对的引用
因为浏览器对document.doctype的支持不一致,因此这个属性的用处很有限。
同样,浏览器之间的不一致性也导致位于元素外部的注释没有什么用处。
文档类型(如果存在的话)是只读的,而且只能有一个元素子节点,因此用不着在document对象上调用appandChild()、removeChild()和replaceChild()方法。
文档信息
title属性
//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New Page title";
URL属性
包含页面完整的URL。(即地址栏中显示的URL)
domain属性
包含页面的域名。
referrer属性
保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下,referrer属性中可能会包含空字符串。
//取得完整的URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的URL
var referrer = document.referrer;
三个属性中,只有domain是可以设置的。但由于安全方面的限制,并不是可以设置任何值。
//假设页面来自p2p.wrox.com域
document.domain = "wrox.com"; //成功
document.domain = "nczonline.net"; //出错!
由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信,而通过将每个页面的document.domain设置为相同的值,这些页面就可以互相访问对方包含的JavaScript对象。
/*
浏览器对domain的限制:如果域名一开始是“松散的”(loose),那么不能将它设置为“紧绷的”(tight)。
*/
//假设页面来自于p2p.wrox.com域
document.domain = "wrox.com"; //松散的(成功)
document.domain = "p2p.wrox.com"; //紧绷的(出错!)
查找元素
getElementById()
/*
* getElementById()
* param:要取得元素的ID。
* (必须与页面中元素的id特性严格匹配,包括大小写)
* 返回:
* 如果找到相应的元素则返回该元素;
* 如果不存在带有相应ID的元素,则返回null
*/
text
var div = document.getElementById("myDiv");
var div = document.getElementById("mydiv"); // 无效的ID(IE7 及以前可以)
getElementsByTagName()
/*
* getElementsByTagName()
* param:要取得元素的标签名。
* 返回:包含0或多个元素的NodeList。
* (在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个“动态”集合。)
*/
//取得页面所有元素,并返回一个HTMLCollection。
var images = document.getElementsByTagName("img");
//可以用方括号语法或item()方法来访问HTMLCollection对象中的项。
alert(images.length);
alert(images[0].src);
alert(images.item(0).src);
//HTMLCollection还有一个方法:namedItem(),可以通过元素的name特性取得集合中的项。
var myImage = images.namedItem("myImage");
var myImage = images["myImage"];
//取得文档中所有元素,向getElementsByTagName()中传入“*”。
var allElement = document.getElementsByTagName("*");
getElementsByName
只有HTMLDocument类型才有的方法。
/*
* getElementsByName()
* param:要取得元素的name。
* 返回:带有给定name特性的所有元素。
*/
//最常用的是取得单选按钮:确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的name特性。
var x=document.getElementsByName("x");
alert(x.length);
特殊集合
- document.anchors:包含文档中所有带name特性的元素;
- document.applets:包含文档中所有的
- document.forms:包含文档中所有的
- document.images:包含文档中所有的元素,与document.getElementsByTagName("img")得到的结果相同;
- document.links:包含文档中所有带href特性的元素。
文档写入
write()、writeln()、open()、close()
write()、writeln()方法接受一个字符串参数,即要写入到输出流的文本。在页面被夹在过程中,可以使用这两个方法向页面中动态的加入内容。
open()、close()分别用来打开和关闭网页的输出流。如果是在页面加载期间使用write()或writeln()方法,则不需要用到这两个方法。