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 и т. д. этот метод всегда возвращает пустой список.
