Элементы JavaScript HTML DOM
На этой странице вы узнаете, как находить и получать доступ к HTML-элементам на HTML-странице.
Поиск элементов HTML
Часто с помощью JavaScript вы хотите манипулировать элементами HTML.
Для этого нужно сначала найти элементы. Есть несколько способов сделать это:
- Поиск элементов HTML по идентификатору
- Поиск элементов HTML по имени тега
- Поиск элементов HTML по имени класса
- Поиск элементов HTML с помощью селекторов CSS
- Поиск элементов HTML по коллекциям объектов HTML
Поиск элемента HTML по идентификатору
Самый простой способ найти элемент HTML в DOM — использовать идентификатор элемента.
Этот пример находит элемент с помощью id="intro":
Пример
const element = document.getElementById("intro");
Если элемент найден, метод вернет элемент как объект (в элементе).
Если элемент не найден, элемент будет содержать null.
Поиск элементов HTML по имени тега
Этот пример находит все <p>элементы:
Пример
const element = document.getElementsByTagName("p");
Этот пример находит элемент с id="main", а затем находит все <p>элементы внутри "main":
Пример
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Поиск элементов HTML по имени класса
Если вы хотите найти все элементы HTML с одинаковым именем класса, используйте
getElementsByClassName().
В этом примере возвращается список всех элементов с расширением class="intro".
Пример
const x = document.getElementsByClassName("intro");
Поиск элементов HTML с помощью селекторов CSS
Если вы хотите найти все элементы HTML, которые соответствуют указанному селектору CSS (идентификатор, имена классов, типы, атрибуты, значения атрибутов и т. д.), используйте querySelectorAll()метод.
В этом примере возвращается список всех <p>элементов с расширением class="intro".
Пример
const x = document.querySelectorAll("p.intro");
Поиск элементов HTML по коллекциям объектов HTML
Этот пример находит элемент формы с id="frm1", в коллекции форм и отображает все значения элемента:
Пример
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Также доступны следующие объекты HTML (и коллекции объектов):