getElementById() против querySelector()
Привет! Добро пожаловать в мой самый первый пост в блоге, в котором я сравниваю и противопоставляю методы поиска HTML-элементов в JavaScript. Исходя из опыта, я изо всех сил пытался понять основные различия между getElementById() и querySelector(), а также когда их использовать. Поэтому в сегодняшнем блоге я сначала объясню важность таких методов, прежде чем углубляться в более конкретные преимущества и недостатки.
Важность доступа к элементам HTML DOM
HTML-элементы — это строительные блоки HTML-страниц. Часто с помощью JavaScript вы хотите манипулировать этими HTML-элементами по разным причинам. Например, вы хотите, чтобы ваша HTML-страница была более интерактивной, поэтому вы внедрили слушатели событий, прикрепленные к кнопкам или тексту, которые при действии пользователя отображают различные фрагменты информации. Примером интерактивной страницы может быть базовая база данных Harry Potter, над которой я работал, используя запросы на выборку через API. Для получения дополнительной информации о моем проекте, не стесняйтесь прокрутить вниз до раздела Дополнительно ниже.
Как вы можете видеть, страница загружает информацию о новом участнике, когда пользователь нажимает на разные Дома, а также дополнительную личную информацию каждого участника при дальнейшем нажатии. Это интерактивная страница, использующая прослушиватели событий для отображения новой информации при взаимодействии пользователя с сайтом. Первым шагом к созданию более сложных веб-сайтов является понимание того, как взаимодействовать с DOM и управлять элементами HTML.
Чтобы манипулировать элементами HTML, вы должны сначала найти элементы. Это можно сделать несколькими способами: найти элементы HTML по идентификатору, имени тега, имени класса, селекторам CSS и коллекциям объектов HTML.
Что такое метод querySelector()?
Метод JavaScript querySelector() позволяет пользователю извлекать элемент из веб-страницы DOM или HTML с помощью селектора CSS (каскадных таблиц стилей). Этот метод очень универсален, поскольку позволяет выбрать любой элемент веб-страницы. Используя querySelector, пользователю не нужно беспокоиться о том, что ему разрешено выбирать элементы только по классу или идентификаторам. Пример синтаксиса querySelector для получения различных элементов будет показан ниже.
document.querySelector('p') // ищет имя тега абзаца document.querySelector('.some-class') // ищет определенный класс document.querySelector('#some-id') // ищет определенный идентификатор
Важно отметить, что метод querySelector возвращает первый экземпляр входных данных для поиска. Существует также метод querySelectorAll(), который извлекает все элементы, соответствующие введенному тегу, классу или идентификатору.
Что такое метод getElementById()?
Метод JavaScript getElementById() извлекает элемент на основе его атрибута ID. Этот метод может получить только один элемент с веб-страницы на основе его конкретного идентификатора. Это связано с тем, что идентификаторы HTML должны быть уникальными, то есть не может быть нескольких элементов с одинаковым идентификатором. Однако недостатком этого метода является то, что он гораздо более строгий, чем querySelector, и может получить доступ к элементам только через их идентификатор. Пример синтаксиса getElementById будет показан ниже.
document.getElementbyId(‘some-id’) // ищет определенный идентификатор
Если элемент не найден, метод вернет null.
Вывод
Вам нужно выбрать подходящий метод для каждой конкретной задачи. Оба метода getElementById() и querySelector() имеют свои преимущества и недостатки, поэтому ни один из них не «лучше» другого. Метод querySelector() просматривает весь ваш HTML-файл, позволяя вам найти элементы, которые обычно не могут быть выражены с помощью getElementById(). Однако getElementById() лучше поддерживается и надежнее, чем querySelector(). Это связано с тем, что querySelector() является более новой функцией и, следовательно, более подвержена потенциальным ошибкам.
Метод querySelector позволяет получить элемент с помощью запроса селектора CSS. Метод getElementById извлекает элемент по его DOM ID. Вы должны использовать метод querySelector для выбора элементов со сложными правилами, которые могут быть представлены с помощью селектора CSS.
Другие методы
Пара других полезных методов для поиска элементов:
document.getElementsbyTagName('p') // ищет имя тега абзаца document.getElementsbyClassName('some-class') // ищет определенный класс
Примеры
Если задан файл HTML:
<div> <div class="banner"> <h1>Hello!</h1> </div><div> <h5 id="greeting">Greetings!</h5> </div><div class="banner"> <h2>header2?</h2> </div> <div class="outro"> <h1>Goodbye</h1> </div> </div>
Метод JavaScript, обсуждаемый в этом блоге, вернет:
document.querySelector('h1');
// returns first element with <h1> tag
document.querySelector('.banner');
// returns the first element with class="banner"
document.querySelector('#greeting');
// returns the first element with id="greeting"
document.getElementbyId('greeting');
// returns the same as above method
document.getElementsbyTagName('h1');
// returns all elements with <h1> tags
document.getElementsbyClassName('banner');
// returns all elements with class="banner"
document.querySelectorAll('.banner');
// returns the same as above method
Дополнительно
В этом разделе я объясню, как метод getElementById() помог мне в моем проекте.
HTML-код для заполнения личной информации каждого персонажа:
В JavaScript-части кода была функция, которая обращалась к элементам HTML, соответствующим правильному идентификатору элемента, а затем назначала текстовое содержимое с личной информацией персонажа, полученной из общедоступного API. Эта функциональность реализована с помощью метода getElementById:
