Объект document. Поиск элементов

Последнее обновление: 1.11.2015

Для работы со структурой DOM в JavaScript предназначен объект document, который определен в глобальном объекте window. Объект document предоставляет ряд свойств и методов для управления элементами страницы.

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

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

  • getElementById(value): выбирает элемент, у которого атрибут id равен value

  • getElementsByTagName(value): выбирает все элементы, у которых тег равен value

  • getElementsByClassName(value): выбирает все элементы, которые имеют класс value

  • querySelector(value): выбирает первый элемент, который соответствует css-селектору value

  • querySelectorAll(value): выбирает все элементы, которые соответствуют css-селектору value

Например, найдем элемент по id:

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

С помощью вызова document.getElementById("header") находим элемент, у которого id="header". А с помощью свойства innerText можно получить текст найденного элемента.

Поиск по определенному тегу:

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

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

С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.

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

var pElement = document.getElementsByTagName("p")[0];
document.write("Текст параграфа: " + pElement.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 articleDiv = document.getElementsByClassName("article")[0];
	console.log(articleDiv);
var textElems = document.getElementsByClassName("text");
for (var i = 0; i < textElems.length; i++) {
	console.log(textElems[i]);
}
</script>
</body>
</html>

Выбор по селектору css:

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

Выражение document.querySelector(".annotation p") находит элемент, который соответствует селектору .annotation p. Если на странице несколько элементов, соответствующих селектору, то метод выберет первый из них. В итоге браузер выведет:

Аннотация статьи

Первый абзац

Второй абзац

Текст селектора: Аннотация статьи

Чтобы получить все элементы по селектору, можно подобным образом использовать метод document.querySelectorAll, который возвращает массив найденных элементов:

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

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

Вывод браузера:

Аннотация статьи

Первый абзац

Второй абзац

Текст селектора 0: Первый абзац
Текст селектора 1: Второй абзац
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850