Обращение к элементу в JavaScript

Прочитайте про селекторы JQuery

пример

Выберите элемент с идентификатором intro:

$("#intro")

пример

Выделите все элементы с классом "intro":

$(".intro")

А нативно на JS можно обратиться

document.getElementById(Id)

document.getElementsByClassName(class)

document.querySelector('.class').addEventListener(ev, cb, {});

Поиск элемента и addEventListener.

Также для прослушивания событий можно использовать onclick(ev), onmouseenter(ev) и тд.

Проблема (или, преимущество) в том, что jQuery оставляет все необходимые циклы за кулисами. Что с одним элементом, что с нескольким - зачастую код выглядит одинаково. А на стандартном JS нужно делать переборы "вручную".

В JS есть:

• document.querySelector(".class") - возвращает первый соответствующий элемент на странице, или null, если ничего не найдет.
  * на jQuery, обращение к первому элементу: $(".class").eq(0)

• document.querySelectorAll(".class") - всегда возвращает NodeList коллекцию всех найденных элементов. К каждому элементу из коллекции можно обращаться через его номер. Если элементов не найдено, вернет коллекцию нулевой длины (length: 0)

И querySelector-ы, и jQuery-функция $() помимо классов, поддерживают любой стандартный CSS-селектор

$("div").addClass("blue");


let div = document.querySelectorAll("div");
for (let i = 0; i < div.length; i++) {
  div[i].classList.add("yellow");
}
// div[0].classList.add("yellow"); // первый
// div[1].classList.add("yellow"); // второй...
// ...


document.querySelector("div").style.backgroundColor = "#2ad";
// обращение к первому элементу

div {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 4px;
  font-size: 50px;
}

.blue {
  background-color: #169;
}
.yellow {
  color: #fd0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>