Как сделать чтобы js применялись только к определенному диву?

Question

[masterwen]

Как сделать чтобы js применялись только к определенному диву и его содержимому а не ко всей странице.

Comments

[Антон Воскобоев]

Применить его только в определенному диву.

[LJ322]

Для начала нужно разобраться что такое страница и что такое скрипт

Answer 1

[Anonymous]

Соглашусь с ответом webjun , нужно просто указать айдишник чтобы выбрать один из дивов с одинаковым классом. Айди обозначает уникальный элемент. Просто присвойте одному айди из всех дивов

Пример:

<div class="div" id="name-id"></div> <!-- первый див c айдишником name-id -->
<div class="div"></div><!-- второй див -->
<div class="div"></div><!-- третий див -->

const div = document.querySelector("#name-id") 
/* Как я уже сказал ранее, айдишник присваивается только ОДНОМУ, УНИКАЛЬНОМУ ЭЛЕМЕНТУ. 
Здесь мы получим первый див. 
*/
// и делаем что хотим дальше с элементом

Answer 2

[webjun]

Присвоить этому диву какой-то айдишник и обратиться к нему по айди.

<div id="test"></div>;

const div = document.getElementById("test")

Comments

[masterwen]

А ecлм в . Будут другие дивы он будет к ним применятся? Или нужно будет тоже их прописывать

[webjun]

masterwen, нет ко всем дивам оно применяться не будет, айди он и нужен чтоб обозначить уникальность.

К примеру у вас на странице есть три дива и вам нужно в каждом из них сделать текст красным, обычно делается так :

<div class="test">TEST</div>
<div class="test">TEST</div>
<div class="test">TEST</div>

const test = document.querySelectorAll('.test');

test.forEach((element) => {
	element.style.color = "red"
})

Answer 3

[Danya Wyse]

Назначь класс диву "element" например,
Потом в js пишешь вот так
const div = document.querySelector('.element');

И код будет применяться к этому диву

Comments

[masterwen]

А ecлм в . Будут другие дивы он будет к ним применятся? Или нужно будет тоже их прописывать

[Danya Wyse]

masterwen, если дивы с разными классами то не будет, смотря какая логика нужна

[webjun]

Danya Wyse, так даже если дивы будут с одинаковыми классами все равно применяться ко всем элементам не будет, для этого нужно форичом пробегатьтся. В нодлисте мы дейтвительно получим все элементы с классом но чтоб применить к ним что-либо это уже forEach

[Anonymous]

webjun, если использовать querySelector - будет взят первый найденный элемент. Если querySelectorAll - возьмет все которые будут найдены в DOM