[译文]通过ID, TagName, ClassName, Name, CSS selector 得到element

致谢原文： <http://xahlee.info/js/js_get_elements.html>

1. 通过ID得到element：

Document.getElementById(id string) 返回element object, 如果失败，得到null

注意id在页面内应该是唯一的，但在iframe的看作是另一个html页面

1. 通过TagName得到element

document.getElementsByTagName(tagname)返回element object集合. tagname 如div, span, p,

var myList = document.getElementsByTagName("p"); // 得到所有p元素

myList.length; // 返回p元素总数
myList[0].style.color = "red"; // 修改第一个元素的style

1. 通过ClassName得到element

document.getElementsByClassName("class values") 返回element object集合.

var myList = document.getElementsByClassName("abc");
myList[0].style.color = "red"; // make the first
one red

The class values可以是多个，用空格隔开. 比如"aa
bb",

一个元素也可以有多个ClassName, 比如：
<pclass="aa">1</p>

<pclass="bb">2</p>

<pclass="bb
aa">3</p>

<pclass="bb cc
aa">4</p>

<script>document.getElementsByClassName("aa
bb");</script>

将会得到第三和第四个元素

1. 通过Name得到element

document.getElementsByName("name value")  返回element object集合.

比如：
<pname="abc">you</p>
<divclass="zz"name="xyz">me</div>
<divclass="zz"name="xyz">her</div>

<form>
<inputname="xyz"type="text"size="20">
</form>

var xyz =
document.getElementsByName("xyz");
xyz[0].style.color="red"; // make the first
one red

1. 通过CSS Selector得到element

 document.querySelectorAll(css selector) 返回element object集合,  css selector 是string, 可以是多个用逗号隔开.

var xx = document.querySelectorAll("span.a, span.c");

for (var i = 0; i < xx.length;
i++) {
    xx[i].style.color="red";
}