特定类中的GetElementsByTagName？

Question

如果它属于特定的类，我将如何通过TagName获取元素？

示例，如果我想选择test_class中的每个<li> TagName。

<ul class="test_class">
    <li>
        1
    </li>
    <li>
        2
    </li>
    <li>
        3
    </li>
    <li>
        4
    </li>
</ul>

Answer 1

您可以使用querySelectorAll

var listItems = document.querySelectorAll(".test_class li");
//=> [li, li, li, li]

由

支持

Browser    Version
Chrome     1
Firefox    3.5
IE         8 (CSS2 selectors only)
IE         9
Opera      10
Safari     3.2

---

如果您需要支持旧版浏览器，则无法依赖.querySelectorAll

// find all UL.test_class
var lists = document.getElementsByClassName("test_class"),
    listItems = [];

// loop through all lists and concat all children LI elements to single result
for (var i=0, len=lists.length; i<len; i++) {
  listItems.concat(lists[i].getElementsByTagName("li"));
}

console.log(listItems);
//=> [li, li, li, li]

---

性能

毫不奇怪，.querySelectorAll只是略微慢一点，但哇肯定是简洁的。除非你真的需要支持旧浏览器（IE <= 7），否则我不会在这种情况下过早优化

http://jsperf.com/qsa-vs-getelementbytagname

Answer 2

你可以：

• 获取对该类成员的元素的引用，然后在该DOM元素上调用getElementsByTagName 或
• 使用接受CSS选择器的document.querySelectorAll(".test_class li")

如果您需要支持旧IE，请使用第一种方法。

Answer 3

您可以链接DOM查询。

var items = document
              .getElementsByClassName('test_class')[0]
              .getElementsByTagName('li');