Wonder233
Wonder233

【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);

特殊集合