GetElementByTagName в определенном классе?

Question

Как я могу получить элемент с помощью TagName, если он попадает под определенный класс?

Пример, если бы я хотел выбрать каждое значение <li> TagName, которое находится в пределах test_class.

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

Answer 1

Вы можете:

• Получить ссылку на элемент, который членом этого класса, а затем вызвать getElementsByTagName на этом DOM элемент или
• Использование document.querySelectorAll(".test_class li"), который принимает CSS Selector

Используйте первый подход, если вам нужно поддерживать старый IE.

Answer 2

Вы можете использовать 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 3

Вы можете связать запрос DOM.

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