JavaScrip节点类型之Document节点-原创手记-慕课网

基本概念

在浏览器中，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，已经加载完文档。
② readyState一般配合readystatechange事件使用，当readyState文档的属性发生改变时，将触发该事件。

例子：

document.onreadystatechange = function() {
        if (document.readyState === "complete") {
            console.log("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');

console.log(p[0].nodeName); //输出：P
console.log(p.item(0).nodeName); //输出：P
console.log(p.length); //输出：3

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

例子：

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

var input = document.getElementsByTagName('input');

console.log(input[0].name); //输出：name0
console.log(input.namedItem('name1').name); //输出：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()：
确定文档是否获得焦点，返回布尔值。

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。