JavaScrip节点类型之Document节点

下载贤集网APP入驻自媒体


	基本概念


	



	在浏览器中，document对象表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。


	



	Document节点的基本属性


	



	nodeType的值为9


	nodeName的值为"#document"


	nodeValue的值为null


	parentNode的值为null


	



	Document节点的常用属性


	1、后代节点属性


	



	document.documentElement：取得文档中的html元素。


	document.body：取得文档中的body元素。


	document.forms：取得文档中所有的form元素。


	document.images：取得文档中所有的img元素。


	document.links：取得文档中所有带href属性的a元素。


	document.head：取得文档中的head元素。


	跨浏览器的写法：


	var head = document.head || document.getElementsByTagName("head")[0];


	



	2、文档信息属性


	



	document.activeElement：返回文档中当前获得了焦点的元素。


	document.title：通过这个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。


	document.URL：取得完整的URL。


	document.domain：取得域名。


	document.referrer：取得链接到当前页面的那个页面的URL，没有来源页面时返回空字符串。


	



	document.readyState：


	



	① readyState属性有两个可能的值：loading，正在加载文档；complete，已经加载完文档。


	② document.readyState属性的基本用法是来实现一个指示文档已经加载完成的指示器。


	



	例子：


	



	document.onreadystatechange=function(){


	if(document.readyState==="complete"){


	alert("OK")


	}


	}


	//输出：OK


	复制代码


	



	Document节点的常用方法


	



	document.getElementById()：取得元素的ID。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。


	document.getElementsByTagName()：


	



	①返回一个HTMLCollection（只读的HTML元素集合）对象，作为一个“动态”集合。所谓动态，即HTMLCollection对象中的项会随着当前文档内容的更新而更新。


	② 通过Element类型调用getElementsByTagName()方法时，只会在该元素后代元素的范围内查找匹配的元素。


	③ 可以使用方括号语法或item()方法来访问HTMLCollection对象中的项。而这个对象中元素的数量则可以通过其length属性取得。


	例子：


	



	<div><p>0</p><p>1</p><p>2</p></div>


	



	var div=document.getElementsByTagName('div')[0]


	var p=div.getElementsByTagName('p')


	alert(p[0].nodeName)


	alert(p.item(0).nodeName)


	alert(p.length)


	//输出：P/P/3


	复制代码


	



	④ HTMLCollection对象还支持按name属性取得集合中的项，可以使用namedItem()方法或使用方括号语法来访问。


	



	例子：


	<input name="name0" type="checkbox">


	<input name="name1" type="checkbox">


	<input name="name2" type="checkbox">


	



	var input=document.getElementsByTagName('input')


	alert(input[0].name)


	alert(input.namedItem('name1').name)


	//输出：name0/name1


	复制代码


	



	document.getElementsByName()：返回带有name属性的所有元素（HTMLCollectioin对象）。最常使用getElementsByName()方法的情况是取得单选按钮。


	document.getElementsByClassName()：该方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所


	有元素的NodeList（有序节点列表）对象。NodeList对象与HTMLCollection对象非常相似。支持


	getElementsByClassName()方法的浏览器有IE9+、Firefox 3+、Safari 3.1+、Chrome和Opera 9.5+。


	



	document.querySelector()：


	



	该方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。也可以通过Element


	类型调用querySelector()方法。


	



	例子：


	



	var body = document.querySelector("body")


	var myDiv = document.querySelector("#myDiv")


	var selected = document.querySelector(".selected")


	复制代码


	



	document.querySelectorAll()： 该方法接收一个CSS选择符作为参数，返回一个NodeList对象。


	document.hasFocus()：确定文档是否获得焦点，返回布尔值。