пример
Измените текст первого пункта списка с классом = «ребенок» (index 0) в виде списка с классом = «пример»:
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Перед изменением текста:
- Coffee
- Tea
После изменения текста:
- Milk
- Tea
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
getElementsByClassName() метод возвращает коллекцию дочерних элементов Элемент с именем указанного класса, в качестве объекта NodeList.
Объект NodeList представляет коллекцию узлов. Узлы могут быть доступны с помощью индексов. Индекс начинается с 0.
Совет: Вы можете использовать длину свойство объекта NodeList , чтобы определить количество дочерних узлов с указанным именем класса, то вы можете перебрать все узлы и извлекать информацию , которую Вы хотите.
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4,0 | 9,0 | 3.0 | 3,1 | 9,5 |
Синтаксис
element .getElementsByClassName( classname )Значения параметров
| параметр | Тип | Описание |
|---|---|---|
| classname | String | Необходимые. Имя класса дочерних элементов, которые вы хотите получить. Для поиска нескольких имен классов, разделив их пробелами, как "child color" . |
Технические подробности
| DOM Версия: | Базовый уровень 1 Элемент объекта |
|---|---|
| Возвращаемое значение: | Нодлист объект, представляющий коллекцию дочерних элементов элементов с именем указанного класса. Элементы в возвращаемых коллекциях сортируются, как они появляются в исходном коде. |
Еще примеры
пример
Изменение цвета фона второго элемента с классом = «ребенок» внутри <div> элемент:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor
= "red"; Попробуй сам " пример
Узнайте, как много элементов с классом = «ребенком» есть внутри <div> элемент (используя свойство длины объекта NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;В результате х будет:
3 Попробуй сам " пример
Изменение цвета фона первого элемента как с "child" и "color" класса внутри элемента с классом = «пример»:
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red"; Попробуй сам " пример
Изменение цвета фона всех элементов с классом = «ребенок» внутри <div> элемент:
var x = document.getElementById("myDIV");
var y =
x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++)
{
y[i].style.backgroundColor = "red";
} Попробуй сам " Похожие страницы
Учебник CSS: CSS селекторы
CSS Reference: CSS .class Selector
HTML DOM Ссылка: документ. getElementsByClassName()
HTML DOM Ссылка: className Property
HTML DOM Ссылка: classList Property
HTML DOM Ссылка: HTML DOM Style Object