Объект document. Как найти элемент на странице

Здравствуйте! В этом уроке рассмотрим основные методы для поиска элементов на странице. Ведь для того, чтобы что то сделать с элементом на веб-странице его надо для начала найти. Для этой цели используется объект document мы уже с ним встречались в примерах когда выводили информацию в браузер с помощью функции document.write(). Здесь же мы рассмотрим еще методы для поиска элементов в дереве DOM.

Поиск элементов

Для поиска элементов на странице используются следующие методы:

getElementById(value): ищет элемент по id
getElementsByTagName(value): ищет элементы по тегам. Функции надо передать тег, а вернет функция массив или коллекцию элементов
getElementsByClassName(value): ищет элементы по классу, возвращает массив
querySelector(value): выбирает элемент по селектору. Поддерживаются все селекторы css
querySelectorAll(value): Аналогично предыдущей функции querySelector тоже ищет элементы по селектору css, но возвращает массив или коллекцию элементов.

Ко всем этим методам надо писать document а потом имя метода. Давайте для примера рассмотрим как можно найти элемент по его идентификатору

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div>
<h3 id="head">Block Header</h3>
<p>Text</p>
</div>
<script>
var headerEl = document.getElementById("head");
document.write("Текст заголовка: " + headerEl.innerText);
</script>
</body>
</html>

В примере с помощью document.getElementById(«head») найдем элемент, у которого id=»head». А вот с помощью свойства innerText мы получаем текст найденного элемента.
Рассмотрим пример с поиском по определенным тегами:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <h3>Заголовок</h3>
        <p>1-ый абзац</p>
        <p>2-ой абзац</p>
    </div>
<script>
var pElem = document.getElementsByTagName("p");

for (var i = 0; i < pElem.length; i++) {
    document.write("Текст параграфа: " + pElem[i].innerText + "<br/>");
}
</script>
</body>
</html>

Здесь в примере вызовом метода document.getElementsByTagName(«p») мы найдем параграфы на странице. Это вернет нам массив элементов. И соответственно для того, чтобы найти каждый из этих элементов по ним надо пробежаться в цикле.

Если надо получить только 1-ый элемент, то можно обратиться к 1-ому элементу найденной коллекции объектов:

var pElem = document.getElementsByTagName("p")[0];
document.write("Текст параграфа: " + pElem.innerText);

Рассмотрим пример поиска элемента по классу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="article">
        <h3>Заголовок</h3>
        <p class="text">Первый абзац</p>
        <p class="text">Второй абзац</p>
    </div>
<script>
var article = document.getElementsByClassName("article")[0];
    console.log(article);
var textElem = document.getElementsByClassName("text");
for (var i = 0; i < textElems.length; i++) {
    console.log(textElem[i]);
}
</script>
</body>
</html>

Теперь пример поиска по селектору css:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="annot">
        <p>Аннотация статьи</p>
    </div>
    <div class="text">
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
<script>
var el = document.querySelector(".annot p");
document.write("Текст селектора: " + el.innerText);
</script>
</body>
</html>

Здесь выражение document.querySelector(«.annot p») найдет элемент, который соответствует селектору .annot p. То есть абзац вложенный в элемент с классом annot. Если абзацев больше одного тогда будет найден только первый а все остальные будут проигнорированы.
А вот для того чтобы найти все элементы по селектору, используется метод document.querySelectorAll, который вернет массив элементов:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="annot">
        <p>Аннотация статьи</p>
    </div>
    <div class="text">
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
<script>
var elem = document.querySelectorAll(".text p");

for (var i = 0; i < elem.length; i++) {
    document.write("Текст селектора " + i + ": " + elem[i].innerText + "<br/>");
}
</script>
</body>
</html>

Просмотреть пример

Смотрите видео по работе с DOM