[译文]通过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页面

 

2. 通过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

3. 通过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>

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

4. 通过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

5. 通过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";
　　　　　　}