Как получить элементы html по классу?

Question

[Дмитрий]

Есть блок, в нем еще дивы лежат с одинаковым классом
Мне через джс нужно получить массив блоков с этим классом
я пишу через getElementsByClassName('КЛАСС'), но не выходит

Comments

[Шохрух Шаймардонов]

что не выходит? ошибки какие? с чем вы getElementsByClassName('КЛАСС') используете?

[Дмитрий]

Шохрух Шаймардонов,

<div class="tabs" id="tabs">
		<div class="tabs-header">
			<div class="tab-title"><a href="#" class="tab-link">One</a></div>
			<div class="tab-title"><a href="#" class="tab-link">Two</a></div>
			<div class="tab-title"><a href="#" class="tab-link">Three</a></div>
		</div>
		<div class="tabs-body">
			<p class="tabs-content d-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum reprehenderit, similique qui! Ab suscipit facilis animi. Hic recusandae quaerat quasi. Esse aperiam labore sapiente in. Earum consequuntur numquam repellendus similique?</p>
			<p class="tabs-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur est natus suscipit repellat unde ex molestiae impedit molestias! Distinctio laborum maxime ut quo quae, sapiente cumque eius similique culpa adipisci.</p>
			<p class="tabs-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates ipsam ratione eligendi sequi vitae eius voluptatum, deserunt natus non iusto quasi error deleniti, eos facere tenetur possimus aliquid adipisci provident!</p>
		</div>
	</div>

var tabs = document.getElementById('tabs');
tabs.querySelectorAll('.tab-link').style = 'color:red;';

[Шохрух Шаймардонов]

Дмитрий, у вас проблема не в getElementsByClassName или в querySelectorAll, а в том как вы пытаетесь свойства css задать! Пишите

tabs.querySelectorAll('.tab-link').style.color = 'red'

, либо

tabs.querySelectorAll('.tab-link').style.cssText = 'color: red;'

. Но! во 2м случае он перезапишет все свойства данного класса, если вам этого не нужно, то только 1й вариант

[nvdfxx]

код в студию

Answer 1

[Шохрух Шаймардонов]

Вот вам подробнее статья. Почитайте обязательно!

Answer 2

[dollar]

var tabs = document.getElementById('tabs');
tabs.querySelectorAll('.tab-link').forEach(e=>e.style='color:red;');

А ещё лучше так

var tabs = document.getElementById('tabs');
tabs.querySelectorAll('.tab-link').forEach(e=>e.style.color='red');

Answer 3

[sasha_pe]

document.getElementsByClassName('test');

Comments

[Дмитрий]

Не работает.
Вот два подхода делал:
var tabs = document.getElementById('tabs');
tabs.querySelectorAll('.tab-link').style = 'color:red;';

и

var tabs = document.getElementById('tabs');
tabs.getElementsByClassName('tab-link').style = 'color:red;';

[Дмитрий]

Первая строка получает весь блок, а вторая по идеи должна отобрать элементы с нужным классом
Но стиль не срабатывает

Answer 4

[user49981]

divs = document.getElementsByClassName('div');
for(let i = 0; i < divs.length; i++) {
	alert(divs[i].innerText);
}