Если вы читаете эту статью, значит, вы должны быть знакомы с DOM (объектной моделью документа). Итак, давайте начнем с селекторов DOM, не теряя времени на объяснение, что такое DOM.

Селекторы DOM, как следует из названия, используются для выбора элементов HTML в документе с помощью JavaScript. Существует 5 способов выбора элементов в модели DOM с помощью селекторов.

  • getElementsByTagName ()
  • getElementsByClassName ()
  • getElementById ()
  • querySelector ()
  • querySelectorAll ()

Все эти методы являются свойствами объекта документа. Итак, чтобы использовать один, мы должны добавить к этим элементам префикс объекта документа как,

document.getElementsByTagName()
document.getElementsByClassName()
document.getElementById()
document.querySelector()
document.querySelectorAll()

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

<!-- Sample HTML Page -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document Object Model</title>
</head>
<body>
    <h1 class="heading">DOM Selectors</h1>
    <ul>
        <li id="item">getElementsByTagName</li>
        <li class="selectors">getElementsByClassName</li>
        <li class="selectors">getElementById</li>
        <li id="item">querySelector</li>
        <li id="item">querySelectorAll</li>
    </ul>
</body>
</html>

Приведенный выше HTML-документ не требует пояснений, поскольку он очень прост. И я буду использовать веб-консоль, чтобы лучше все объяснить. Давайте начнем.

getElementsByTagName

Этот метод возвращает все элементы, соответствующие указанному имени тега.

  • document.getElementsByTagName('h1') возвращает набор элементов, соответствующих имени тега h1. А поскольку у нас всего один элемент h1, список содержит только один элемент.
  • Используя [0] в качестве индекса, мы можем получить доступ к первому элементу в списке, который равен <h1 class="heading">DOM Selectors</h1>.
  • document.getElementsByTagName('li') возвращает список из 5 элементов, поскольку на нашей странице есть пять тегов li.
  • Любой отдельный элемент можно выбрать с помощью его индекса, например document.getElementsByTagName('li')[0].

getElementsByClassName

Этот метод возвращает все элементы, соответствующие указанному имени класса.

  • Этот селектор очень похож на getElementsByTagName, за исключением того, что s выбор основан на имени класса, а не имени тега. Вы можете увидеть несколько примеров на изображении выше.

getElementById

Здесь выбор основан на имени идентификатора. И это похоже на селектор имени тега и имени класса, но есть разница в том, сколько элементов выбирает этот селектор. Во всех перечисленных выше селекторах возвращается список всех совпадающих элементов. Но этот селектор возвращает только первый совпавший элемент, игнорируя остальные.

  • Как видите, несмотря на то, что у нас есть 3 элемента li с идентификатором item, мы получили только первый элемент li с идентификатором элемент. Остальные все элементы игнорируются.

И в этом getElementById отличается от getElementsByTagName и getElementsByClassName. getElementById возвращает элемент, как только он находит совпадение. Также вы можете заметить различие в названии селектора: слово элемент употребляется в единственном числе в getElementById, а во множественном числе в других селекторах getElementsByTagName & getElementsByClassName.

querySelector

Он возвращает первый элемент, который соответствует указанному селектору CSS в документе.

  • document.querySelector('li') возвращает первый элемент, соответствующий селектору CSS li. Остальные элементы игнорируются.
  • document.querySelector('.heading') возвращает первый элемент, соответствующий селектору CSS .heading.
  • document.querySelector('#item') возвращает первый элемент, соответствующий селектору CSS #heading.
  • Как видите, мы можем использовать все виды селекторов CSS в методе querySelector, который мы будем использовать в обычном файле CSS.

Обратите внимание, что вы должны использовать селекторы CSS, а не обычные селекторы HTML в качестве параметра. document.querySelector('.className') действителен, а document.querySelector('className') недействителен. Поэтому вам нужно использовать формат, используемый в селекторах CSS.

querySelectorAll

Этот метод возвращает все элементы, которые соответствуют указанному селектору CSS в документе.

  • document.querySelectorAll('.heading') возвращает список всех элементов, соответствующих указанному селектору CSS. Поскольку у нас есть только один элемент под именем класса .heading, список содержит один элемент. И к нему можно получить доступ по его index.
  • Точно так же document.querySelectorAll('#item') возвращает список из 3 элементов, соответствующих селектору CSS. Доступ к отдельным элементам осуществляется с помощью индекса.

Обратите внимание, что два элемента не должны иметь одинаковый идентификатор в качестве хорошей практики. И я использовал тот же идентификатор для некоторых элементов, чтобы лучше объяснить ситуацию. Таким образом, вы можете следовать рекомендуемому способу не использовать один и тот же идентификатор более чем для одного элемента.

Это все, что касается селекторов DOM. Мы поговорим о некоторых других методах DOM в следующей статье. Спасибо. Удачного кодирования!

Учить больше



11 служебных библиотек Javascript, которые вы должны знать в 2019 году
11 полезных служебных библиотек Javascript для ускорения разработки. blog.bitsrc.io





11 библиотек анимации JavaScript на 2019 год
Некоторые из лучших библиотек анимации JS и CSS в мире. blog.bitsrc.io





Понимание асинхронного JavaScript
Узнайте, как работает асинхронный JavaScript blog.bitsrc.io