html页面设置document类型,【DOM】Document类型

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.getElementsByTagName("form")得到的结果相同；

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

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

文档写入

write()、writeln()、open()、close()

write()、writeln()方法接受一个字符串参数，即要写入到输出流的文本。在页面被夹在过程中，可以使用这两个方法向页面中动态的加入内容。

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