Меню

getElementsByClassName()

Поддержка браузерами

9.0+ 3.0+

Описание

Метод document.getElementsByClassName() возвращает объект NodeList, содержащий все элементы, у которых значение атрибута class совпадает с переданной методу строкой.

При вызове метода getElementsByClassName() для объекта document, выполняется поиск по всему документу, включая корневой элемент. Если метод вызывается для объекта element, то поиск выполняется только среди потомков данного элемента.

Примечание: вместо метода getElementsByClassName() можно использовать метод querySelectorAll(), позволяющий проводить поиск элементов используя допустимые CSS селекторы.

Синтаксис


document.getElementsByClassName()(classname)

Аргументы

  • classname: строка, представляющая собой значение атрибута class.

    Для поиска элементов с несколькими значениями в атрибуте class, указываются имена классов через пробел:
    
    document.getElementsByClassName()("header menu")
    

Возвращаемое значение

  • объект NodeList: коллекция элементов с заданным значением атрибута class. Элементы в возвращаемой коллекции сортируются в порядке их расположения в исходном коде.

Пример


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <script>
    function changeColor(newColor) {
      let el = document.getElementsByClassName("one");
	  let el2 = document.getElementsByClassName("one two");
      el[0].style.color = newColor;
	  el2[0].style.color = newColor;
    }
  </script>
</head>
<body>

  <p class="one">Какой-то текст.</p>
  <p class="one two">Какой-то текст.</p>
  <button onclick="changeColor('blue')">синий</button>
  <button onclick="changeColor('red')">красный</button>

</body>
</html>
Попробовать »