Для начинающих программистов JavaScript одним из первых навыков, которые вам понадобятся, когда вы начинаете создавать собственные проекты, является манипулирование DOM. И шаг один из этого? Поиск элементов, которыми вы хотите манипулировать. Здесь я собираюсь разобрать различные способы поиска HTML-элементов доступа.

Допустим, это наш простой HTML-документ:

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <h1 class="bold" id="title">Learning How to Select This      Element</h1>
    <h1 class="bold" id="title-2">Sometimes We Will Select This One Too</h1>
    <h1>Or This One</h1>
  </body>
</html>

Я собираюсь показать вам несколько способов доступа к одному, некоторым или всем элементам ‹h1› в теле документа.

документ.getElementById()

Метод getElementById() просматривает документ HTML и находит элемент с совпадающим идентификатором (помните, идентификаторы могут быть присвоены только одному элементу, поэтому этот метод никогда не вернет более одного элемента). Таким образом, в приведенном выше примере мы просто поместили бы идентификатор, назначенный этому элементу, в кавычки в качестве аргумента для метода.

document.getElementById('title')

Это вернет только первый элемент ‹h1›, потому что это единственный элемент с совпадающим идентификатором.

<h1 class="bold" id="title">Learning How to Select This      Element</h1>

document.getElementsByClassName()

Этот метод аналогичен предыдущему, но вместо этого находит все элементы с одинаковым именем класса. В примере, с которым мы работаем, давайте возьмем первые два элемента ‹h1›.

document.getElementsByClassName('bold')

Поскольку у третьего элемента нет имени класса, он не будет выбран, но два других будут возвращены как коллекция, которую вы можете перебирать и манипулировать ею по своему усмотрению!

document.getElementsByTagName()

Это метод, который мы использовали бы, если бы хотели получить все теги ‹h1› из документа.

document.getElementsByTagName('h1')

В нашем примере выше этот метод возвращает коллекцию всех трех тегов ‹h1›.

документ.querySelector()

Метод querySelector() использует селектор CSS в качестве аргумента и находит первый соответствующий элемент. Допустим, вы хотите снова получить этот первый элемент ‹h1›. Просто добавьте это в качестве аргумента:

document.querySelector('h1')

Поскольку этот метод использует селекторы CSS, вы не ограничены только именами тегов HTML. Вы можете использовать имена классов, идентификаторы и даже их комбинации. Итак, допустим, на этот раз мы хотим получить только второй элемент ‹h1›:

document.querySelector('#title-2')

Это делает трюк!

документ.querySelectorAll()

Как и метод выше, querySelectorAll() использует селекторы CSS в качестве аргументов, но на этот раз вместо простого выбора первого совпадающего элемента он возвращает список всех совпадающих элементов. Поэтому, если вы хотите манипулировать всеми вашими элементами ‹h1›, самый простой способ сделать это — использовать этот метод.

document.querySelectorAll('h1')

Как и некоторые другие методы, этот вернет коллекцию всех трех элементов ‹h1›.

Аааа это все ребята! Эти 5 методов помогут вам в вашем путешествии по ванильному JavaScript. Следующими шагами будет присвоение возвращаемого элемента переменной, а затем добавление прослушивателей событий к этим отдельным элементам DOM. Удачного кодирования!