标签：
在讲解如何选取文档元素之前，先普及一下什么是文档节点：
HTML文档的每个节点都表示一个Node对象，节点树形结构的根部是Document节点，代表整个文档，代表HTML元素的节点是Element节点，代表文本的节点是Text节点；Document、Element、Text类都是Node类的子类；（Comment节点类型代表注释节点，Attr节点类型代表属性）
查询一个或多个文档元素的方法:
（文档Document对象和元素Element对象均定义了以下方法，即也可以在一个元素Element上选择它的子元素）
一、用指定的id属性：document.getElementById(‘idName‘);
自定义一个工具函数同时选取多个元素：
function getElements(‘id1‘,‘id2‘,‘id3‘,......){
var elements = {};
for(var i = 0,len = arguments.length;i<len;i++){
var id = arguments[i];
var elt = document.getElementById(id);
if(elt == null){throw new Error(‘No element with id: ‘+id);}
elements[id] = elt;
}
return elements;
}
二、用指定的name属性：getElementsByName(‘name‘);返回一个包含若干Element对象的只读类数组对象NodeList对象，它同时也匹配具有和name同名的id属性的元素，所以不要将同一个字符串同时用于id属性和name属性；
虽然在用一个字符串给一个元素的id属性或name属性赋值时，这个字符串会自动的成为当前窗口对象的一个全局属性，即可以直接通过该属性名调用对应的元素，但最好显示的调用getElementsByName()来选取他们，因为该变量在日后可能会失效(当给窗口对象定义同名属性时)
三、用指定的标签名：getElementsByTagName(‘tagname‘);同样返回一个NodeList对象，该类数组对象中的元素是按所有该标签在文档中出现的顺序排序的，可通过索引来选取指定元素；
该方法不区分标签的大小写；
可使用‘*‘通配符来选取文档的所有元素；
可在指定Element对象上调用该方法，来选取它的子元素；
HTMLDocument类还指定了一些快捷属性，如：images、forms、links、anchors、embeds、plugins、scripts等，他们都指定HTMLCollection对象，它也是一个类数组对象，可以这样来选取他们的集合中的某一个元素document.forms[‘idname‘];或document.images[0];
HTMLDocument类还指定body、head属性，特指<body>和<head>元素，还有documentElement属性指文档的根元素<html>
NodeList和HTMLCollection对象通常是实时的，即当文档变化时它们所包含的元素列表能随之改变；最好使用for循环来遍历一个NodeList或HTMLCollection对象，而for..in循环会遍历到他们的length属性；
四、用指定的class属性：getElementsByClassName();基于其class属性值中的标识符来选取成组的文档元素，他也返回一个实时的NodeList对象
五、用指定的CSS选择器来匹配：(返回的是静态的NodeList对象)
querySelectorAll()根据一个包含CSS选择器的字符串，返回一个表示当前文档中匹配选择器的所有元素的NodeList对象，但该NodeList对象不是实时的，它只包含调用时刻所匹配到的元素，并不更新后续文档的变化，若找不到匹配则返回空的NodeList对象；
querySelector()只返回第一个匹配的元素对象(以文档顺序)，若匹配不到则返回null
querySelector()、querySelectorAll()在元素Element对象上也有定义，在元素上调用它们时，先仍然在整个文档中匹配，然后再过滤出结果集以便它只包含该元素的后代元素；
querySelector()、querySelectorAll()在大多情况下不匹配伪元素，如:first-line :first-letter :link :visited
选取文档元素的方法总结
标签：
原文地址：http://www.cnblogs.com/susufufu/p/5738673.html
