Получение элементов страницы с помощью querySelector и других методов

JavaScript предоставляет возможность управлять элементами на веб-странице через объектную модель документа (DOM). Для получения доступа к таким элементам JS имеет ряд методов объекта document: querySelector, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName, getElementsByName. В этой статье мы разберем каждый из этих методов, а также рассмотрим, как получить элемент страницы с помощью библиотеки jQuery.

Метод querySelector

Синтаксис метода querySelector выглядит следующим образом:

document.querySelector(selector);

Здесь selector — это строка, содержащая CSS-селектор, который определяет желаемый элемент на странице. Метод querySelector возвращает первый элемент, соответствующий заданному CSS-селектору, или null, если такой элемент не найден. Например, чтобы получить первый элемент с классом someClass, необходимо использовать следующий код:

const elem = document.querySelector('.someClass ');

Метод querySelector также может использоваться для получения элементов с помощью более сложных селекторов CSS. К примеру, для получения первого элемента с классом someClass и атрибутом data-num необходимо использовать следующий код:

const elem = document.querySelector('.someClass[data-num]');

Также можно использовать комбинированные селекторы CSS для получения элементов, которые соответствуют определенным условиям:

// Получение первого элемента input с атрибутом type="checkbox" и классом input-field
const inputElem = document.querySelector('input[type="checkbox"].input-field');

// Доступ к первому элементу a с классом btn внутри элемента с классом menu
const buttonElem = document.querySelector('.menu a.btn');

// Получаем первый элемента img с атрибутом alt="product image" внутри элемента с классом product
const imageElem = document.querySelector('.product img[alt="product image"]');

// Получение первого элемента input с атрибутом type="text" и атрибутом name содержащим слово email
const emailInput = document.querySelector('input[type="text"][name*="email"]');

После того как мы получили объект элемента, можно с ним работать. Например, установить обработчик нажатия на кнопку:

const button = document.querySelector('.button');

button.addEventListener('click', () => {
  alert('Button clicked!');
});

Метод querySelector возвращает только первый найденный элемент. Поэтому, если нужно получить все элементы, соответствующие заданному селектору, следует использовать метод querySelectorAll, речь о котором пойдет в следующем разделе.

Метод querySelectorAll

Метод querySelectorAll также является методом объекта document и используется для поиска всех элементов на странице, которые соответствуют заданному CSS-селектору. Этот метод возвращает коллекцию NodeList, которая содержит ссылки на все соответствующие элементы на странице. Если не найдено ни одного элемента, querySelectorAll возвращает пустую коллекцию NodeList.

Синтаксис метода querySelectorAll выглядит так:

document.querySelectorAll(selector);

Строка selector — это CSS-селектор, который мы хотим использовать для поиска элементов.

Рассмотрим пример использования метода querySelectorAll.

HTML:

<ul>
    <li>Item 1</li>
    <li class="special">Item 2</li>
    <li>Item 3</li>
</ul>

JavaScript:

const listItems = document.querySelectorAll('li');
console.log(listItems); // NodeList [li, li.special, li]

const specialItems = document.querySelectorAll('.special');
console.log(specialItems); // NodeList [li.special]

В этом примере мы используем метод querySelectorAll, чтобы получить ссылки на все элементы списка и на элемент списка с классом special. Затем мы выводим эти ссылки в консоль.

Обратите внимание, что метод querySelectorAll возвращает коллекцию NodeList, которую можно перебирать с помощью цикла или метода forEach. Например, мы можем изменить цвет всех элементов списка, используя следующий код:

listItems.forEach(item => {
    item.style.color = 'red';
});

Этот код изменит цвет текста всех элементов списка на красный.

Метод getElementById

Метод getElementById используется для получения элемента на странице по его идентификатору.

Синтаксис getElementById:

document.getElementById(id);

Параметр id — это идентификатор элемента, который необходимо получить. Метод getElementById возвращает ссылку на элемент, соответствующий указанному идентификатору. Если элемент не найден, метод возвращает null.

Пример:

<!DOCTYPE html>
<html>
<head>
    <title>Пример метода getElementById</title>
</head>
<body>
    <div id='someDiv'>Это div с id='someDiv'</div>
    <script>
        const elem = document.getElementById('someDiv');
        console.log(elem.innerHTML);
    </script>
</body>
</html>

В этом примере мы получаем элемент div с идентификатором someDiv с помощью getElementById. Затем выводим содержимое элемента в консоль, используя метод innerHTML.

Важно отметить, что идентификаторы элементов должны быть уникальными на странице. Если на странице есть несколько элементов с одинаковым идентификатором, метод getElementById вернет только первый из них.

Метод getElementsByClassName

Метод getElementsByClassName позволяет получить коллекцию элементов (HTMLCollection), которые содержат заданный класс.

Синтаксис метода getElementsByClassName выглядит следующим образом:

document.getElementsByClassName(className);

className — это имя класса элементов, который требуется получить.

Метод getElementsByClassName возвращает коллекцию элементов, у которых значение атрибута class соответствует указанному имени класса. Если элементов с заданным классом нет, метод возвращает пустую коллекцию.

Пример:

<!DOCTYPE html>
<html>
<head>
    <title>Пример метода getElementsByClassName</title>
    <style>
      .someClass {
        color: red;
      }
    </style>
</head>
<body>
    <div class="someClass">Это div с классом someClass</div>
    <p class="someClass">Это абзац с классом someClass</p>
    <script>
      const elems = document.getElementsByClassName('someClass');
      for (let i = 0; i < elems.length; i++) {
        console.log(elems[i].innerHTML);
      }
    </script>
</body>
</html>

В примере выше мы создаем два элемента (div и p) с классом someClass и выводим содержимое каждого элемента в консоль, используя метод getElementsByClassName.

Стоит отметить, что метод getElementsByClassName возвращает живую коллекцию элементов. Это означает, что если вы добавите или удалите элементы на странице, коллекция будет автоматически обновлена.

Метод getElementsByTagName

Метод getElementsByTagName позволяет получить коллекцию элементов (HTMLCollection) с определенным тегом.

Синтаксис метода такой:

document.getElementsByTagName(tagName)

Здесь tagName — это строковый параметр, содержащий название тега элемента, который нужно найти.

Этот метод возвращает коллекцию HTML элементов, которые содержат заданный тег внутри своей структуры. Если элементы с этим тегом не найдены, метод вернет пустую коллекцию.

Для работы с элементами коллекции, возвращаемой методом getElementsByTagName, можно использовать индексы или циклы. Например, чтобы получить первый элемент с тегом p на странице и изменить его содержимое, можно использовать следующий код:

const firstParagraph = document.getElementsByTagName('p')[0];
firstParagraph.innerHTML = 'Новый текст для первого абзаца.';

Также можно использовать цикл for, чтобы перебрать все элементы с заданным тегом и выполнить с ними какие-либо действия. Например, чтобы скрыть все элементы с тегом img на странице, можно выполнить такой код:

const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
}

Метод getElementsByName

Метод getElementsByName используется для получения всех элементов с указанным атрибутом name. Этот метод возвращает коллекцию элементов NodeList. При отсутствии искомых элементов на странице getElementsByName вернет пустую коллекцию.

Синтаксис:

document.getElementsByName(someName);

Строка someName — в значение атрибута name элементов, которые необходимо получить.

Например, если на странице есть несколько элементов input с атрибутом name='username', чтобы получить их все с помощью метода getElementsByName, можно написать следующий код:

const elems = document.getElementsByName('username');
console.log(elems); // NodeList [input, input, input]

Для доступа к элементам коллекции можно использовать индексацию, например, elems[0], elems[1] и т. д.

Получение элементов с помощью jQuery

Помимо получения доступа к элементам веб-страницы с использованием нативного JavaScript, можно воспользоваться популярной библиотекой jQuery. Она предоставляет удобные методы для поиска, выбора и манипулирования элементами на странице.

Для получения элементов на странице с помощью jQuery используется функция jQuery(). Однако для более удобного и краткого обращения к функциям библиотеки обычно отдают предпочтение псевдониму функции jQuery(), который записывает как $(). Функция $() принимает в качестве аргумента CSS-селектор или объект jQuery, содержащий элементы, которые нужно выбрать.

О проблемах использования пседовнимов jQuery можно узнать в этой статье.

Примеры использования функции $():

// получить элемент по id
const elem = $('#someElement');

// получить элементы по классу
const elems = $('.someClass');

// получить элементы по имени тега
const elems = $('p');

// получить элементы по селектору
const elems = $('#someElement .someClass');

Функция $() возвращает объект jQuery, который содержит выбранные элементы. С помощью этого объекта можно манипулировать элементами на странице. Например, изменить их содержимое, стиль, атрибуты или добавить новые элементы на страницу.

Примеры манипуляции элементами с помощью jQuery:

// изменить содержимое элемента
$('#myElement').html('Новое содержимое');

// изменить стиль элемента
$('#myElement').css('color', 'red');

// добавить атрибут элементу
$('#myElement').attr('data-custom-attr', 'значение атрибута');

// добавить новый элемент на страницу
$('#myElement').append('<div>Новый элемент</div>');

Кроме того, в jQuery существуют множество других методов для работы с элементами на странице, таких как addClass(), removeClass(), toggleClass(), fadeOut(), fadeIn() и другие. Они позволяют быстро и удобно добавлять интерактивность на веб-страницы.

Заключение

В практике при работе с DOM, используя чистый JavaScript, среди рассмотренных методов предпочтение отдается querySelector и querySelectorAll. Они более гибкие в использовании, так как позволяют комбинировать различные селекторы и получать элементы с более сложными условиями выборки. К тому же если подключение к вашему проекту библиотеки jQuery является целесообразным, вы можете использовать ее возможности для более простого управления элементами на странице.