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

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.