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

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

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

Поиск элемента в 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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: