Поиск в JavaScript: getElement*, querySelector*
Изучение поиска и выбора элементов в Document Object Model (DOM) является ключевым для разработчиков на JavaScript, которые хотят сделать сайты интерактивными. Это руководство охватывает как устаревшие методы DOM, так и современные селекторы запросов, и включает простые примеры, которые вы можете попробовать.
Эффективный доступ к элементам: getElementById
Метод getElementById — это быстрый и надежный способ доступа к конкретному элементу по его уникальному ID. Поскольку браузер может оптимизировать поиск по ID, этот метод обычно быстрее, чем методы CSS-селекторов. В приведенном ниже примере исходный текст «Default text» немедленно заменяется кодом JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<div id="main-content">Default text</div>
<script>
const element = document.getElementById('main-content');
element.innerHTML = "Modified text!"
</script>
</body>
</html>Result
Доступ к нескольким элементам: getElementsByClassName и getElementsByTagName
INFO
При выборе элементов по имени класса или тегу вы получите объект HTMLCollection. Это живая коллекция, которая автоматически обновляется при изменении DOM, и ведет себя как массив для доступа к элементам по индексу и чтения свойства length. Чтобы перебрать её, необходимо сначала преобразовать её в массив с помощью метода Array.from.
Пример использования getElementsByClassName
Доступ к нескольким элементам с одинаковым классом осуществляется с помощью getElementsByClassName. В этом примере у нас есть два элемента div с одинаковым именем класса. Мы изменяем оба из них, выбирая эти элементы по имени класса.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<div class="info">First Info</div>
<div class="info">Second Info</div>
<script>
const infoElements = document.getElementsByClassName('info');
Array.from(infoElements).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Пример использования getElementsByTagName
Получение элементов по имени тега осуществляется с помощью getElementsByTagName. Это полностью аналогично предыдущему примеру, но на этот раз мы выбираем по имени тега, а не по имени класса.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName Example</title>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<script>
const paragraphs = document.getElementsByTagName('p');
Array.from(paragraphs).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Гибкий поиск с помощью querySelector и querySelectorAll
Выбор с помощью querySelector
Используйте querySelector для поиска первого элемента, соответствующего CSS-селектору. В этом примере мы выбираем первый элемент с классом text, который является прямым потомком элемента с id="main".
<!DOCTYPE html>
<html>
<head>
<title>QuerySelector Example</title>
</head>
<body>
<div id="main"><span class="text">This will be replaced</span></div>
<div id="other"><span class="text">This one doesn't change</span></div>
<script>
const spanInsideDiv = document.querySelector('#main > .text');
spanInsideDiv.innerHTML = "MODIFIED!";
</script>
</body>
</html>Result
Получение нескольких элементов с помощью querySelectorAll
querySelectorAll позволяет выбрать все элементы, соответствующие CSS-селектору. Обратите внимание, что в отличие от getElementsBy*, который возвращает живую HTMLCollection, querySelectorAll возвращает статический NodeList, который фиксирует снимок элементов в момент выбора и не обновляется автоматически при изменении DOM.
<!DOCTYPE html>
<html>
<head>
<title>QuerySelectorAll Example</title>
</head>
<body>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
<script>
const items = document.querySelectorAll('.item');
items.forEach(item => item.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Заключение
Техники, описанные в этом руководстве, предоставляют разработчикам на JavaScript мощные инструменты для эффективного доступа к DOM и манипуляции им. Внедряя эти методы, разработчики могут значительно повысить интерактивность и отзывчивость своих веб-приложений. Эти примеры готовы к тестированию в HTML-файле, что дает практический опыт работы с каждым из рассмотренных методов.
Практика
Какие из следующих утверждений верны относительно методов querySelector и getElementById в JavaScript?