标签：
每个Window对象有一个document属性引用了Document对象。Document对象表示窗口的内容。它并非独立的，它是一个巨大的API中的核心对象，叫做文档对象模式DOM，它代表和操作文档的内容。
文档对象模式DOM是表示和操作HTML和XML文档内容的基础API.HTML文档的树状结构包含表示HTML标签或元素（如《body》<p>）和表示文本字符串的节点，它也可能包含表示HTML注释的节点
每个方框是文档的一个节点，它表示一个Node对象。我们将在后续几节中讨论node的属性和方法，它包含3种不同类型的节点，树形的根部是Document节点，它代表整个文档。代表html元素的节点是Element节点，代表文本的节点是Text节点。Document、Element和Text是Node的子类
注意，通用的Document和Element类型与HTMLDocment和HTMLElement类型之间是有严格的区别的。Docment类型代表一个HTML或XML文档，Element类型代表该文档中的一个元素。HTMLDocument和HTMLElement子类只是针对HTML文档和元素。
为了操作文档中的元素，必须通过某种方式获得或选取这些引用文档元素的Element对象。DOM定义许多方式来选取元素。查询文档的一个或个多个元素有如下方法：
用指定的id属性
用指定的name属性
用指定的标签名字
用指定的CSS
匹配指定的CSS选择器
多个元素可能有同样的名字，在表单中，单选和复选按钮通常是这种情况，而且，和id不一样的是name属性只在少数html元素中有效，包括表单，表单元素、《iframe》和《img》元素
geiElementByName定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用，它返回一个NodeList对象，后者的行为类似一个包含若干Element对象的只读数组。在IE中，getElementByName也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时用作名字和ID。
为某些HTML元素设置name属性将自动为Window对象中创建对应的属性，对Document对象也类似。为form、img iframe applet embed object设置name属性值，即在Document对象中创建以此name属性值为名字的属性（当然假设文档还没有该名字的属性），如果给定的名字只有一个元素，自动创建的文档属性对应的该值是元素本身。如果有多个元素，该文档属性的值是一个NodeList对象，它表现为一个包含这些元素的数组。为若干命名为《iframe》元素所创建的文档属性比较特殊：它们指代这些框架的Window对象而不是Element对象
这就意味着有些元素可以作为D哦促门徒属性仅通过名字来选取
<form name="shipping_address" >元素，得到Element对象
var form=document.shipping_address,
所以不要用为窗口对象自动创建的属性，这同样适用于为文档对象自动创建的属性。如果需要查找命名的元素，最好显示的调用getElemengtsByName来查找它们
类似于getElementsByName,getElementsByTagName()返回一个NodeList对象。在NodeList中返回的元素按照在文档中的顺序排序的
var firstpara=document.getElementsByTagName("p")[0];
HTML标签是不区分大小写的，给getElementsByTagName传递通配参数“*”将获得一个代表文档中所有元素的NodeList对象
Element类也定义getElementsByTagName方法，其原理和Document版本一样，但是它只选取该方法的元素的后代元素
由于历史的原因，HTMLDocument类定义一些快捷属性来访问各种各样的节点。例如images forms和links等属性指向行为类似只读数组的<img>,<form> <a>(但只包含那些与href属性的<a>标签)元素集合。这些属性指代HTMLCollection对象，它们很像NodeList对象，但是除此之外它们可以用元素的ID或者名字来索引。早些时候，我们已经看到用如下的表达式来引用一个命名的<form>元素：
document.shipping_address
用document.forms属性也可以更具体的引用命名（或有ID的）表单，如下：
document.forms.shipping_address
HTMLDoument也定义embeds和plugins属性，它们是同义词，都是HTMLCollection类型的</embed>元素的集合。anchors是非标准属性，它指代有一个name属性的<a>元素而不是一个href属性
HTMLDocument对象还定义两个属性，它们指代特殊的单个元素而不是元素的集合。
document.body是一个html文档的《body》元素，document.head是《head》元素。这些属性总是会定义：如果文档源代码未显示的包含《head》和《body》元素，浏览器将隐式地创建它们。Document类的documentElement属性指代文档的根元素。在HTML文档中，它总是指代《html》元素
getElementsByName和getElementsByTagName都返回NodeList对象，而类似document.images和document.forms的属性为HTMLCollection对象
这些对象都是只读的类数组对象，它们有length属性，也可以像真正的数组一样索引（只是读而不写）
for(var i=0;i<document.images.length;i++){
document.images[i].style.display="none";
}
不能直接在NodeList和HTML集合上调用Array的方法，但可以间接调用：
var content=Array.prototype.map.call(document.getElementsByTagName("p"),function(e){return e.innerHTML};);
HTMLCollection对象也有额外的命名属性，也可以通过数字和字符串来索引。
通常，它们的实时性非常有用，但是，如果要在迭代一个NodeList对象时在文档中添加或者删除的元素，首先会需要对NodeList对象生成一个静态的副本
var snapshot=Array.prototype.slice.call(nodelist,0);
类似getElementsByTagName,在HTML文档和HTML元素上都可以调用getElementsByClassName，它的返回值是一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。它只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才匹配，但是标识符的顺序是无关紧要的
除了IE8及其比较低的版本，getElementsByClassName在所有当前的浏览器中都实现了，IE8确实支持querySelectorAll（）方法，可以在其上实现的
Document方法querySelectorAll。它接受包含一个css选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。与前面描述的选取元素的方法不同，它返回的NodeList对象并不是实时的：它包含在调用时刻选择器所匹配的元素，但它并不更新后续文档的变化。如果没有匹配的元素，querySlectorAll将返回一个空的NodeList对象，如果选择器字符串非法，querySelectorAll将抛出一个异常
querySelector只是返回第一匹配的元素（以文档顺序）或者如果没有匹配的元素就返回null
这两个方法在Element节点中也有定义（并且也在DocumentFragme节点中）。在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集以便它只包含指定元素的后代元素。这看起来是违反常规的，因为它意味着选择器字符串包含元素的祖先而不仅仅是上述所匹配的元素
所有当前的浏览器都支持querySelectorAll和querySelctor方法，但是注意，这些方法的规范并不要求支持css3选择器：鼓励浏览器支持和在样式表中一样的选择器集合，当前的浏览器除了ie都支持css3选择器。ie7和8都支持css2选择器
querySlectorAll是终极的选取元素的方法。通过 它客户端javascript程序能够选择它们想要操作的元素，jquery库使用这种基于css选择器的查询作为它的核心编程方式，基于jquery的web应用程序使用一个轻便的，跨浏览器的、和querySelectorAll等效的方法，命名为$().
标签：
原文地址：http://www.cnblogs.com/yhf286/p/5125424.html
