[译文]通过ID, TagName, ClassName, Name, CSS selector 得到element
致谢原文: <http://xahlee.info/js/js_get_elements.html>
- 通过ID得到element:
Document.getElementById(id string) 返回element object, 如果失败,得到null
注意id在页面内应该是唯一的,但在iframe的看作是另一个html页面
- 通过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
- 通过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>
将会得到第三和第四个元素
- 通过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
- 通过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";
}
[译文]通过ID, TagName, ClassName, Name, CSS selector 得到element,古老的榕树,5-wow.com
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。