10.1.2 Document 类型
Javascript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。
而且,document对象是window对象的一个属性,因此可以将其作为全局对象来访问。
文档节点的三个node属性——nodeType、nodeValue、nodeName分别是9、'#document'和null
由于它是根节点,所以其父节点parentNode指向null,ownerDocument也指向null
console.log(document.nodeType);//9
console.log(document.nodeValue);//null
console.log(document.nodeName);//'#document'
console.log(document.parentNode);//null
console.log(document.ownerDocument);//null
Document类型可以表示HTML页面或者其他基于XML的文档。不过,最常见的应用还是作为HTMLDocument实例的document对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构
1、文档的子节点
Document节点有两个内置的访问子节点的快捷方法:
1)documentElement属性:该属性始终指向HTML页面中的<html>元素,通过childNodes列表访问文档元素
通过documentElement属性能更快捷、更直接的访问该元素:
<html>
<body>
</body>
</html>
-----------------------------------
var html = document.documentElement;//取得对<html>的引用
alert(html === document.childNodes[0]);//true
alert(html === document.firstChild);//true
document对象还有一个body属性,直接指向<body>元素。
var body = document.body //取得对<body>的引用
2)DocumentType:通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体。
可以通过doctype属性来访问它的信息:
var doctype = document.doctype; //取得对<!DOCTYPE>的引用
由于浏览器对document.doctype的支持不一致,因此这个属性的用处很有限。
多数情况下,我们用不着在document对象上调用appendChild()、removeChild()和replaceChild()方法,因为文档类型(如果存在的话)是只读的,而且它只能有一个元素子节点(该元素节点通常早就存在了)
2、文档信息
作为HTMLDocument的一个实例,document对象还有一些标准的Document度向上所没有的属性。这些属性提供了ducument对象所表现的网页的一些信息。
1)title:通过这个属性可以取得当前页面的标题,也可以修改当前页面的标题并反映在浏览器的标题栏中
以下3个属性都与对网页的请求有关:
①URL:包含页面完整的URL
②domain:只包含页面的域名
③referrer:保存着链接到当前页面的那个页面的URL,在没有来源页面的情况下,referrer属性中可能会包含空字符串。
所有这些信息都存在于请求的HTTP头部,通过这些属性让我们能够在Javascript中访问它们。
URL与domain属性是相互关联的,3个属性中只有domain是可以设置的。但由于安全方面的限制,也并非可以给domain设置任何值
//假设页面来自p2p.wrox.com域
document.domain = "wrox.com"; //成功
document.domain = "nczonline.net"; //出错!
3、查找元素
- getElementById(),接受一个参数:要取得的元素的ID。如果找到相应的元素则返回该元素,如果不存在带有相应ID的元素,则返回null。
ID必须与页面中元素的id特性严格匹配,包括大小写
<div id="myDiv">Some text</div>
可以使用下面的代码取得这个元素:
var div = document.getElementById("myDiv");
如果页面中多个元素的ID值相同,getElementById()只返回文档中第一次出现的元素。IE7及低版本中:如果哪个表达元素的name特性等于指定的ID,而且该元素在文档中位于给定ID的元素前面,那么IE就会返回那个表达元素。最好的办法就是不让表达字段的name特性与其他元素的ID相同。
- getElementsByTagName():接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的NodeList
var images = document.getElementByTagName("img");
alert(image.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的src特性
alert(images.item(0).src); //输出第一个图像元素的src特性
var myImage = images.namedItem("myImage");
var myImage = images["myImage"];
3)getElementSByName():只有HTMLDocument类型才有的方法。这个方法会返回带有给定name特性的 所有元素。
未完待续