На этой странице вы узнаете, как находить элементы HTML на странице HTML и обращаться к ним.
Поиск элементов HTML
Часто с помощью JavaScript вы хотите манипулировать элементами HTML.
Для этого вам нужно сначала найти элементы. Есть несколько способов сделать это:
- Поиск элементов HTML по идентификатору
- Поиск элементов HTML по имени тега
- Поиск элементов HTML по имени класса
- Поиск элементов HTML с помощью селекторов CSS
- Поиск элементов HTML по коллекциям объектов HTML
Поиск элемента HTML по идентификатору
Самый простой способ найти HTML элемент в DOM - использовать идентификатор элемента.
В этом примере выполняется поиск элемента с id="intro":
var myElement = document.getElementById("intro");
Попробуйте сами »
Если элемент найден, метод вернет элемент как объект (в myElement).
Если элемент не найден, myElement будет содержать null.
Поиск элементов HTML по имени тега
Этот пример находит все элементы <p>:
var x = document.getElementsByTagName("p");
Попробуйте сами »
Этот пример находит элемент с id="main", а затем находит все <p> элементы внутри "main":
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Попробуйте сами »
Поиск элементов HTML по имени класса
Если вы хотите найти все элементы HTML с одинаковым именем класса, используйте getElementsByClassName().
В этом примере возвращается список всех элементов с class="intro".
var x = document.getElementsByClassName("intro");
Попробуйте сами »
Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версиях.
Поиск элементов HTML с помощью селекторов CSS
Если вы хотите найти все элементы HTML, соответствующие указанному селектору CSS (идентификатор, имена классов, типы, атрибуты, значения атрибутов и т.д.), используйте этот метод querySelectorAll() method.
В этом примере возвращается список всех <p> элементов с class="intro".
var x = document.querySelectorAll("p.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