1. Document 类型
JavaScript 通过 Document 类型表示文档。在浏览器中， document 对象是 HTMLDocument （继承自 Document 类型）的一个实例，表示整个 HTML 页面。 document 对象可以作为全局对象来访问。
可以遍历document查看所有属性：

for(var i in document){
    document.write(document[i]+ "\n");
}

DOM定义许多方式来选择元素，查询文档的一个或多个元素有以下方法：
■ 用指定的id属性
■ 用指定的name属性
■ 用指定的标签名字
■ 用指定的CSS类
■ 匹配指定的CSS选择器

(1)用指定的id属性
任何html元素可以有一个id属性，在文档中该值必须唯一，即同一个文档中的两个元素不能有相同的ID。可以用Document对象的getElementById()方法选取一个基于唯一ID的元素。匹配元素的ID是区分大小写的。

<xmp>
//< div id="Section1" > getElementById</div>
var section1 = document.getElementById("section1");  // 无法获取 IE8以下浏览器除外
var section1 = document.getElementById("Section1");  // 正常获取
</xmp>

同时寻找多个ID元素的函数：

<xmp>
function getElements(/*ids...*/){
	var elements = {};
    for(var i=0; i<arguments.length; i++){
    	var id = arguments[i];
    	var elt = document.getElementById(id);
    	if(elt == null){
    		throw new Error("没有找到id:" + id);
    	}else{
    		elements[id] = elt;
    	}
    }
    return elements;
}
</xmp>

在低于IE8版本的浏览器中，getElementById()对匹配元素的ID不区分大小写，而且也返回匹配name属性的元素

<xmp>
// <input name="seld" value="333">
var section1 = document.getElementById("seld");
</xmp>

(2)用指定的name属性选取元素
HTML的name属性最初打算为表单元素分配名字，在表单数据提交到服务器时使用该属性的值。name属性的值不是必须唯一的（单选和复选按钮就可以有多个相同的）。name属性只在少数HTML元素中有效，包括表单、表单元素、iframe和img元素。

基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法。

var username = document.getElementsByName("username");

getElementsByName()定义在HTMLDocument类中，而不是Document类中，所以它只针对HTML文档可用，在XML文档中不可用。它返回一个NodeList对象（类似一个包含若干Element对象的只读数组）。

在IE中，getElementsByName()也返回id属性匹配指定的元素，为了兼容，不要将同样的字符串同时用做name和ID。

(3)用指定的标签名字选取元素
Document对象的getElementsByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素。

//获取span元素
var spans = document.getElementsByTagName("span");

getElementsByTagName()返回一个NodeList对象。在NodeList中返回的元素按照在文档中的顺序排序的，所以可用如下代码选取文档中第一个p元素：

var firstp = document.getElementsByTaName("p")[0];

HTML标签是不区分大小写的，当在HTML文档中使用getElementsByTagName()时，它进行不区分大小写标签名比较。例如上述span将包含所有SPAN的span.

给getElementsByTagName()传递通配符参数“*”，将获得一个代表文档中所有元素的NodeList对象。

Element类也定义getElementsByTagName()方法，其原理和Document版本一样，但是它只能选择调用该方法的元素的后代元素。例如：要查找文档中第一个P元素里面的所有span

var firstp = document.getElementsByTagName("p")[0];
var spans = firstp.getElementsByTagName("span");

(4)用指定的CSS类选取元素
HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。在Javascript中class是保留字，所以客户端javascript使用className属性来保存HTML的class属性值。
getElementsByClassName()返回值是一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。

getElementsByClassName()只需要一个字符串参数，但该字符串可以由多个空格隔开的标识符组成。只有元素的class属性值包含所有指定的标识符时才匹配，但标识符的顺序是无关紧要的。

//查找class属性值中包含warning的所有元素
var warnings = document.getElementsByClassName("warning");

//查找ID为log的 并且有error 和 fatal类的元素的所有后代
var log = document.getElementById("log");
var fatal = log.getElementsByClassName("fatal error")

(5)匹配指定的CSS选择器选取元素
CSS样式表有一种非常强大的语法，那就是选择器，它用来描述文档中的若干或多组元素。

#nav          /*id="nav"的元素*/
div           /* 所有< div > 元素*/
.warning      /* 所有在class属性值包含了“warning”的元素*/
p[lang="fr"]  /* 所有使用法语的段落，如：<p lang = "fr">*/
*[name="x"]   /* 所有包含name="x"属性的元素*/
#log>span     /* id="log" 元素的子元素中所有span元素*/

获取匹配一个给定选择器的元素的Javascript的方法是，querySelectorAll()，返回一个NodeList对象，但返回的NodeList不是实时的（它包含在调用时刻选择器所匹配的元素，但它并不更新后续文档的变化）。如果没有匹配的元素，querySelectorAll()将返回一个空的NodeList对象，如果选择器字符串非法，则抛出一个异常。

var sections = document.querySelectorAll(".section");

除了querySelectorAll()，文档对象还定义了一个querySelector()方法，返回第一个匹配的元素（以文档顺序）。如果没有匹配则返回null

var section = document.querySelector(".section");

2.节点指针

Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要的属性：

■ parentNode：该节点的父节点，Document对象的parentNode是null,因为它没有父节点。

■ childNodes：只读的类数组对象（NodeList对象），它是该节点的子节点实时表示。

■ firstChild、lastChild：该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null

■ nexSibling、previoursSibling：该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点。节点的顺序反映了它们在文档中出现的顺序。

■ nodeType：该节点的类型。 9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点。

■ nodeValue：Text节点或Comment节点的文本内容。

■ nodeName：元素的标签名，以大写形式表示。