/ ↲
    Расширенный поиск

    JavaScript

    .getElementsByClassName()

    Получаем список элементом с заданным классом.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Метод определён для объекта document и любого HTML-элемента (Element) страницы. Позволяет найти все элементы с заданным классом или классами среди дочерних.

    Метод принимает один параметр — название класса или список классов в виде строки. Если передаёшь список классов, то раздели их названия пробелами class1 class2. Элемент подходит, если у него есть все классы из перечисленных.

    Возвращает похожую на массив HTMLCollection с найденными элементами. Если элементов не нашлось, то коллекция будет пустая, то есть с размером 0.

    Пример

    Скопировано
            
          
          <html>  <head></head>  <body>    <div id="title">      <h1>Привет, незнакомец!</h1>      <div class="paragraph subtitle">Div с классом paragraph и subtitle</div>    </div>    <p class="paragraph">Параграф с классом paragraph</p>    <script>      const paragraphs = document.getElementsByClassName('paragraph')      console.log(paragraphs.length)      // напечатает 2      const divEl = document.getElementById('title')      // ищем параграфы внутри div:      const paragraphsFromDiv = divEl.getElementsByClassName('paragraph')      console.log(paragraphsFromDiv.length)      // напечатает 1, так как внутри div только один элемент с классом paragraph      const subtitleParagraphs = document.getElementsByClassName(        'paragraph subtitle'      )      console.log(subtitleParagraphs.length)      // напечатает 1, так как на странице только один элемент,      // у которого есть и класс paragraph, и класс subtitle      // ищем несуществующий элемент      const spanFromBody = document.getElementsByClassName('hello')      console.log(spanFromBody.length) // напечатает 0    </script>  </body></html>
          <html>
  <head></head>
  <body>
    <div id="title">
      <h1>Привет, незнакомец!</h1>
      <div class="paragraph subtitle">Div с классом paragraph и subtitle</div>
    </div>
    <p class="paragraph">Параграф с классом paragraph</p>
    <script>
      const paragraphs = document.getElementsByClassName('paragraph')
      console.log(paragraphs.length)
      // напечатает 2

      const divEl = document.getElementById('title')
      // ищем параграфы внутри div:
      const paragraphsFromDiv = divEl.getElementsByClassName('paragraph')
      console.log(paragraphsFromDiv.length)
      // напечатает 1, так как внутри div только один элемент с классом paragraph

      const subtitleParagraphs = document.getElementsByClassName(
        'paragraph subtitle'
      )
      console.log(subtitleParagraphs.length)
      // напечатает 1, так как на странице только один элемент,
      // у которого есть и класс paragraph, и класс subtitle

      // ищем несуществующий элемент
      const spanFromBody = document.getElementsByClassName('hello')
      console.log(spanFromBody.length) // напечатает 0
    </script>
  </body>
</html>

    Как понять

    Скопировано

    Метод работает с DOM, который связан с HTML-разметкой. Каждый HTML-элемент имеет родительские и дочерние элементы:

    • Родительские элементы — это элементы, внутри которых находится элемент. В примере выше у элемента <h1> есть два родительских элемента — <div> и <body>.
    • Дочерние элементы — это элементы, которые содержит текущий элемент. Они могут быть, а могут не быть. Например, для тега <body> все элементы страницы дочерние. У <h1> дочерний элемент — текст внутри тега.

    Если работаешь с корнем страницы, объектом document, то поиск идёт по всем элементам страницы (т.е. от <body>), если от конкретного элемента, то поиск идёт только по всем дочерним.

    Так как мы заранее не знаем, сколько элементов с искомым тегом найдётся, то метод возвращает коллекцию элементов.

    Каждый элемент HTML может иметь класс или несколько классов. Когда пользуетесь getElementsByClassName(), поиск идёт только по классам (атрибут class). Названия тегов и все остальные атрибуты игнорируются.

    На практике

    Скопировано

    Николай Лопин советует

    Скопировано

    🛠 Метод возвращает живую коллекцию. Это означает, что коллекция будет автоматически обновляться, если на странице появятся подходящие элементы. Если не очень понятно, как это работает, то посмотрите пример в статье по методу getElementsByTagName().

    🛠 Нужно быть осторожным, когда пишете циклы над HTMLCollection. Так как коллекция живая, то цикл может стать бесконечным в тех случаях, когда на страницу добавляются и удаляются подходящие под поиск элементы.

    🛠 Скрипты, которые работают с HTML видят только ту разметку, которую уже распарсил браузер. Браузер парсит HTML сверху вниз. Если ваш скрипт находится вверху страницы, то он не найдёт элементы ниже в странице — браузер их ещё не увидел и ничего о них не знает. Поэтому скрипты либо подключают в конце страницы, либо подписываются на событие DOMContent​Loaded, которое сигнализирует о том, что браузер распарсил весь HTML.

    Читайте также