Метод HTML DOM getElementsByTagName()
❮ Элемент объектаПример
Измените содержимое HTML первого элемента <li> (индекс 0) в списке:
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
Определение и использование
Метод getElementsByTagName() возвращает коллекцию дочерних элементов элемента с указанным именем тега в виде объекта NodeList.
Объект NodeList представляет собой набор узлов. Доступ к узлам можно получить по порядковым номерам. Индекс начинается с 0.
Совет: вы можете использовать свойство length объекта NodeList, чтобы определить количество дочерних узлов с указанным именем тега, затем вы можете перебрать все узлы и извлечь нужную информацию.
Совет: Значение параметра "*" возвращает все дочерние элементы элемента.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByTagName() | 1.0 | 6.0 | 3.0 | 3.0 | 9.5 |
Синтаксис
element.getElementsByTagName(tagname)
Значения параметров
| Parameter | Type | Description |
|---|---|---|
| tagname | String | Required. The tagname of the child elements you want to get |
Технические детали
| DOM-версия | Объект элемента основного уровня 1 |
|---|---|
| Возвращаемое значение: | Объект NodeList, представляющий коллекцию дочерних элементов элемента с указанным тэгом. Элементы в возвращаемой коллекции сортируются так, как они появляются в исходном коде. |
Дополнительные примеры
Пример
Узнайте, сколько элементов <p> находится внутри элемента <div> (используя свойство length объекта NodeList):
var x =
document.getElementById("myDIV").getElementsByTagName("P").length;
Пример
Измените цвет фона второго элемента <p> (индекс 1) внутри элемента <div>:
var x =
document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";
Пример
Измените цвет фона всех элементов <p> внутри элемента <div>:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Пример
Измените цвет фона четвертого элемента (индекс 3) внутри элемента <div>:
var x = document.getElementById("myDIV");
x.getElementsByTagName("*")[3].style.backgroundColor = "red";
Пример
С помощью параметра «*».
Измените цвет фона всех элементов внутри элемента <div>:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Связанные страницы
Справочник по JavaScript: document.getElementsByTagName()
Учебное пособие по JavaScript: список узлов JavaScript HTML DOM
❮ Элемент объекта