Почему не работает поиск по классу?

Question

[ilvals]

Изучаю JS. Не могу понять, почему в данном случае не работает поиск по классу?

<div id="parent">
	<div class="child1">text</div>
	<div class="child2">text</div>
	<div class="child3">text</div>
	<div class="child4">text</div>
</div>

let parent = document.getElementById('parent');
document.querySelector('.child1').textContent = "Измененная строка 1";  // работает
document.getElementsByClassName('child2').textContent = 'Измененная строка 2'; // не работает!
parent.querySelector('.child3').textContent = "Измененная строка 3"; // работает
parent.getElementsByClassName('child2').textContent = 'Измененная строка 4'; // не работает!

Answer 1

[Михаил Р.]

Что возвращает метод getElementsByClassName()?

console.log(document.getElementsByClassName('child2')) // HTMLCollection

Какому элемент Вы собрались изменять текст (textContent), если там целая html коллекция?

Вначале, необходимо обойти коллекцию, одним из способов ниже:

// old
Array.from(document.getElementsByClassName('child2')).forEach((el) => {
    el.textContent = 'Измененная строка 2';
});

// new
document.querySelectorAll('.child2').forEach((el) => {
  el.textContent = 'Измененная строка 2';
});

Answer 2

[Nik Faraday]

Обратите внимание, что есть методы который .getElemtByX(), а есть .getElemtsByX(). Логично предположить, что .getElements() будет возвращать вам массив элементов, по этому эта строка у вас и не работает:

document.getElementsByClassName('child2').textContent = 'Измененная строка 2'; // не работает!

Comments

[ilvals]

А можно ли как-то при поиске по классу вернуть один элемент, а не массив? Есть другой метод?

Работает вот так:

document.getElementsByClassName('child2')[0].textContent = 'Измененная строка 2';
parent.getElementsByClassName('child4')[0].textContent = 'Измененная строка 4';

Это корректно использовать?

[Алексей Уколов]

ilvals, если вам не нужно явно получать HTMLCollection вместо NodeList (почти никогда не надо), нет никаких причин использовать getElementsByClassName. Используйте querySelector, когда хотите получить один элемент и querySelectorAll, когда вам нужен список из нескольких.

[ilvals]

Алексей Уколов, спасибо! Я правильно понял, что методы querySelector и querySelectorAll в реальной работе предпочтительнее, а getElementsByClassName и getElementById используется гораздо реже, в более специфических случаях?

[Алексей Уколов]

ilvals, именно так я и написал.
Для getElementById и нет, на самом деле, такого специфического случая. Он работает точно так же, как querySelector, только # указывать не нужно. Гораздо проще не мудрить и использовать для всех выборок один метод.
И только в том редком случае, когда вам нужна будет живая коллекция (у меня за 15 лет работы с js такой потребности ни разу ни возникло), нужно обратиться к getElementsByClassName.

[ilvals]

Алексей Уколов, большое спасибо за развернутый и понятный ответ!