JavaScript чаще всего используется для получения или изменения содержимого или значения HTML-элементов на странице, а также для применения некоторых эффектов, таких как «показать», «скрыть», «анимировать» и т. д. Но прежде чем вы сможете выполнить какое-либо действие, вам нужно найти или выбрать HTML-элемент.
В этом разделе вы увидите некоторые из распространенных способов выбора элементов на странице используя JavaScript.
Выбор верхних элементов
Самые верхние элементы в документе HTML доступны непосредственно как свойства документа. Например, к элементу <html>
можно получить доступ с помощью свойства document.documentElement
, тогда как к элементу <head>
можно получить доступ с помощью свойства document.head
, а к элементу <body>
можно получить доступ с помощью свойства document.body
. Вот пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Topmost Elements</title>
</head>
<body>
<script>
// Печатаем значение атрибута lang html-элемента
alert(document.documentElement.getAttribute("lang")); // Выводит: en
// Устанавливаем цвет фона элемента body
document.body.style.background = "yellow";
// Печатаем имя тега первого дочернего элемента head
alert(document.head.firstElementChild.nodeName); // Выводит: meta
</script>
</body>
</html>
Но будьте осторожны. Если document.body
используется перед тегом <body>
(например, внутри <head>
), он вернет null
вместо элемента <body>
. Поскольку тег <body>
еще не был проанализирован браузером, в месте, где выполняется скрипт.
Давайте лучше рассмотрим следующий пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Document.body Demo</title>
<script>
alert("From HEAD: " + document.body); // Выводит: null (since <body> is not parsed yet)
</script>
</head>
<body>
<script>
alert("From BODY: " + document.body); // Выводит: HTMLBodyElement
</script>
</body>
</html>
Выбор элементов по идентификатору ID
Вы можете выбрать элемент на основе его уникального идентификатора ID с помощью метода getElementById()
. Это самый простой способ найти элемент HTML в дереве DOM.
В следующем примере выбирается и выделяется элемент, имеющий атрибут id="mark"
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Element by ID</title>
</head>
<body>
<p id="mark">This is a paragraph of text.</p>
<p>Это еще один абзац текста.</p>
<script>
// Выбираем элемент с id
var match = document.getElementById("mark");
// Подсвечиваем элемент желтым
match.style.background = "yellow";
</script>
</body>
</html>
Метод getElementById()
вернет элемент как объект, если соответствующий элемент был найден, или null
, если в документе не было найдено соответствующего элемента.
Любой HTML-элемент может иметь атрибут id
. Значение этого атрибута должно быть уникальным на странице, то есть нельзя использовать одинаковые id
для разных элементов.
Выбор элементов по классу
Точно так же вы можете использовать метод getElementsByClassName()
, чтобы выбрать все элементы, имеющие определенное имя класса. Этот метод возвращает массивоподобный объект всех дочерних элементов, которые имеют все заданные имена классов. Давайте посмотрим на следующий пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Class Name</title>
</head>
<body>
<p class="test">Это параграф текста.</p>
<div class="block test">Это еще один абзац текста.</div>
<p>Это еще один абзац текста.</p>
<script>
// Выбираем элементы с классом test
var matches = document.getElementsByClassName("test");
// Отображаем количество выбранных элементов
document.write("Number of selected elements: " + matches.length);
// Применяем жирный стиль к первому выделенному элементу
matches[0].style.fontWeight = "bold";
// Применяем курсив к последнему выделенному элементу
matches[matches.length - 1].style.fontStyle = "italic";
// Выделяем фон каждого элемента
for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>
Выбор элементов по тегу
Вы также можете выбрать HTML-элементы по тегу, используя метод getElementsByTagName()
. Этот метод также возвращает массивоподобный объект всех дочерних элементов с заданным именем тега.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Tag Name</title>
</head>
<body>
<p>Это параграф текста.</p>
<div class="test">Это еще один абзац текста.</div>
<p>Это еще один абзац текста.</p>
<script>
// Выбираем все элементы <p>
var matches = document.getElementsByTagName("p");
// Печатаем количество выбранных абзацев
document.write("Number of selected elements: " + matches.length);
// Выделяем желтым все абзацы в цикле
for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>
Выбор элементов с помощью CSS-селекторов
Вы можете использовать метод querySelectorAll()
, чтобы выбрать элементы, которые соответствуют указанному CSS-селектору. CSS-селекторы обеспечивают очень мощный и эффективный способ выбора HTML-элементов в документе. Подробнее см. Руководство по селекторам в CSS.
Этот метод возвращает список всех элементов, соответствующих указанным селекторам. Вы можете проверить его как любой массив, как показано в следующем примере:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements with CSS Selectors</title>
</head>
<body>
<ul>
<li>Bread</li>
<li class="tick">Coffee</li>
<li>Pineapple Cake</li>
</ul>
<script>
// Выбираем все элементы li
var matches = document.querySelectorAll("ul li");
// Печатаем количество выбранных элементов li
document.write("Number of selected elements: " + matches.length + "<hr>")
// Печатаем содержимое выбранных элементов li
for(var elem of matches) {
document.write(elem.innerHTML + "<br>");
}
// Применяем line-through к первому элементу li с классом tick
matches = document.querySelectorAll("ul li.tick");
matches[0].style.textDecoration = "line-through";
</script>
</body>
</html>
Метод querySelectorAll()
также поддерживает псевдоклассы, такие как :first-child
, :last-child
, :hover
и т. д. Но для псевдоэлементов, таких как ::before
, ::after
, ::first-line
и т. д. этот метод всегда возвращает пустой список.