[译文]通过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";
      }

上一篇:mybatis热加载的实现


下一篇:lintcode: 翻转链表