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