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

    JavaScript

    .getElementsByClassName()

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

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

    Кратко

    Скопировано

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

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

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

    Пример

    Скопировано
            
          
          <body>  <div id="title">    <h1>Привет, незнакомец!</h1>    <div class="paragraph subtitle">      div с классом paragraph и subtitle    </div>  </div>  <p class="paragraph">    Параграф с классом paragraph  </p></body>
          <body>
  <div id="title">
    <h1>Привет, незнакомец!</h1>
    <div class="paragraph subtitle">
      div с классом paragraph и subtitle
    </div>
  </div>
  <p class="paragraph">
    Параграф с классом paragraph
  </p>
</body>

        
        
          
        
      
            
          
          const paragraphs = document.getElementsByClassName('paragraph')console.log(paragraphs.length)// 2const divEl = document.getElementById('title')// Ищем параграфы внутри <div>const paragraphsFromDiv = divEl.getElementsByClassName('paragraph')console.log(paragraphsFromDiv.length)// 1, так как внутри <div> только один элемент с классом paragraphconst subtitleParagraphs = document.getElementsByClassName(  'paragraph subtitle')console.log(subtitleParagraphs.length)// 1, так как на странице только один элемент,// у которого есть и класс paragraph, и класс subtitle// Ищем несуществующий элементconst spanFromBody = document.getElementsByClassName('hello')console.log(spanFromBody.length)// 0
          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

    Как понять

    Скопировано

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

    Родительские элементы — это элементы, внутри которых находится элемент. В примере выше у элемента <h1> есть два родительских элемента — <div> и <body>.

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

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

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

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

    На практике

    Скопировано

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

    Скопировано

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

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

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

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