大多数客户端JavaScript程序运行时总是在操作一个或多个文档元素。当这些元素启动时，可以使用全局变量document来引用Document对象。为了操作文档中的元素，我们可以通过以下5种方式获得或选取这些引用文档元素的Element对象。
一、通过ID选取元素
任何一个HTML元素都有一个独一无二的ID属性，可以用Document对象的getElemenById()方法选取一个基于唯一ID的元素：
var section 1= document.getElementById("section1");
这是最简单和常用的选取元素的方法。如果想要操作某一组指定的文档元素，提供这样元素的Id属性值，并使用ID查找这些Element对象。如果需要通过ID查找多个元素，则使用getElements()函数。
在低于IE 8版本的浏览器中，getElemenById()对匹配元素的ID不区分大小写，而且也返回匹配name属性的元素。
二、通过名字选取元素
区别于ID，name属性的值不是必须为一，多个元素可能有同样的名字，且name属性只在少数HTML元素中有效，包括表单、表单元素、<iframe>和<img>元素。基于name的值选取HTML元素，可以使用Document对象的getElementsByName()方法：
var radiobuttons = document.getElementByName("favorite_color");
getElementsByName()定义在HTMLDocument类中，它只针对HTML文档可用，在XML文档中不可用。它返回一个NodeList对象，类似于一个包含若干Element对象的只读数组。在IE中，该函数也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时做名字和ID。
三、通过标签名选取元素
Document对象的getElementsByTagName()的方法可用来选取指定类型（标签名）的所有HTML或XML元素：
// 在文档中获得包含所有<span>元素的只读的类数组对象
var spans = document.getElementByTagName("span");
getElementsByTagName()类似于getElementsByName()，也返回一个NodeList对象。在NodeList中返回的元素按照在文档中的顺序排序，所以选取文档中的第一个<p>元素可以写为：
var firstpara = document.getElementByTagName("p")[0];
这里要注意HTML标签是不区分大小写的，所以在HTML文档中使用getElementsByTagName()时，它进行不区分大小写的标签名比较。给getElementsByTagName()传递通配符参数“*”将获得一个代表文档中所有元素的NodeList对象。
Element类也定义getElementsByTagName()方法，其原理和Document版本的一样，但是它只选取调用该方法的元素的后代元素。因此，要查找文档中第一个<p>元素里面的所有<span>元素，代码如下：
var firstpara = document.getElementByTagName("p")[0];
var firstparasSpans = firstpara.getElementByTagName("span");
四、通过CSS类选取元素
HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符，它描述一种方法来定义多组相关的文档元素：在它们的class属性中有相同标识符的任何元素属于该组的一部分。在JavaScript中class是保留字，所以客户端JavaScript使用className属性来保存HTML的class属性值。class属性通常与CSS样式表一起使用，对某组内的所有元素应用相同的样式。HTML定义了getElementByClassName()方法，它基于其class属性值中的标识符来选取成组的文档元素。
getElementByClassName()方法在HTML文档和HTML元素上都可以调用，它的返回值是一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。getElementByClassName()只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才匹配，标识符的顺序无关紧要。下面是一些使用getElementByClassName()的例子：
// 查找其class属性值中包含“warning”的所有元素
var warnings = document.getElementsByClassName("warning");
// 查找以“log”命名并且有“error”和“fatal”类的元素的所有后代
var log = document.getElementsByClassName("log");
var fatal = log.getElementsByClassName("fatal error");
五、通过CSS选择器选取元素
CSS样式表有一种非常强大的语法，那就是选择器，它用来描文档中的若干或多组元素。元素可以用ID、标签名或类来描述：
#nav // id="nav"的元素
div // 所有<div>元素
.warning // 所有在class属性值中包含"warning"的元素
元素也可以基于属性值来选取：
p[lang="fr"] // 所有使用法语的段落，如：<p lang="fr">
*[name="x" // 所有包含name="x"属性的元素
这些基本的选择器可以组合使用：
span.fatal.error // 其class中包"fatal"和"error"的所有<span>元素
span[lang="fr"].warning // 所有使用法语的且其class中包含"warning"的<span>元素
选择器可以指定文档结构：
#log span // id="log"元素的后代元素中的所有<span>元素
#log>span // id="log"元素的子元素中的所有<span>元素
body>h1:first-child // <body>的子元素中的第一个<h1>元素
选择器可以组合起来选取多个或多组元素：
*div, #log // 所有<div>元素，以及id="log"的元素
2184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
