Как правильно получить элемент по классу (js)?

Question

[Михаил Р.]

Приветствую!

DOM:

<ul class="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
    <li class="item">item 4</li>
    <li class="item">item 5</li>
</ul>

Вопросы:

1. Как правильно получить элементы по классу item, которые находятся в определенном контейнере? Вариант ниже не сработал...

var list = document.getElementsByClassName('list');
var item = list.getElementsByClassName('item');

2. При получение элементов по классу - возвращается коллекция. Как получить первый элемент коллекции? Попытался обратиться как к массиву, но вариант не сработал...

var item = document.getElementsByClassName('item');
var itemFirst = item[0];

Спасибо!

Answer 1

[Сергей Соколов]

Можно через querySelectorAll()

// внутри ul с классом list ищем все li
var myNodeList = document.querySelectorAll('ul.list li');

if( myNodeList.length) { // что-то нашлось, коллекция не пустая
  var el0 = myNodeList[0]; // первый 
}

Рабочий пример

Метод querySelectorAll() есть и у документа и у элемента. Так что можно сначала получить элемент, внутри которого искать, а затем внутри него собрать коллекцию:

var list = document.querySelectorAll('ul.list'); // все UL класса list в документе
if( list.length) {
  var items = list[0].querySelectorAll('.list');
  // любые элементы класса list внутри первого найденного ul.list

  if(items.length) {
    var item = items[0]; // первый из li
  }
}

Answer 2

[nakree]

.getElementsByClassName - всегда возвращает коллекцию, даже если элемент один.

Чтобы заработал Ваш пример должно быть так:

var list = document.getElementsByClassName('list')[0];
var item = list.getElementsByClassName('item')[3];

Выберет первый элемент с классом .list и найдет в нем четвертый элемент с классом .item