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