При манипулировании DOM иногда нашим первым шагом является «захват» элемента, который мы хотим изменить. Javascript имеет несколько встроенных методов, таких как .querySelector и .getElementsbyTagName, которые служат для выполнения этой задачи. Каждый из этих методов работает немного по-разному, и может быть непросто определить, какой метод может быть наиболее подходящим для конкретной ситуации. Этот пост в блоге призван разрешить некоторую (мою собственную) путаницу, рассмотрев особенности поведения для каждого из этих методов.
Вообще говоря, «правильный» селектор для использования зависит от того, что вы хотите сделать с вашим элементом или элементами. При этом, поскольку эти методы работают одинаково, существует много разных способов достижения одного и того же результата. Нет одного «правильного» ответа. Итак, с чего мы начнем?
Возможно, хороший вопрос для начала: «Хочу ли я манипулировать одним элементом или я хочу манипулировать несколькими элементами?»
При выборе нескольких элементов стоит подумать, возвращает ли ваш метод NodeList или HTML-коллекцию. Каждая из структур похожа на массив и работает по-разному. Например, метод .forEach можно использовать для NodeList, но он не работает для коллекции HTML.
Кроме того, NodeList являются статическими, пока HTML-коллекции активны, что означает, что HTML-коллекция автоматически обновляется, когда происходит соответствующее изменение в DOM, а NodeList нет. Если вы создаете элементы динамически, NodeList может не иметь доступа к этим элементам, в то время как коллекция HTML может.
Также стоит отметить, что методы .getElement фактически могут работать примерно в два раза быстрее, чем методы .querySelector в случае больших и сверхсложных моделей DOM. Однако здесь мнения программистов расходятся, и многие говорят, что повышение производительности вашего приложения с помощью методов .getElement незначительно.
В конце концов, выбор «правильного» метода зависит от вашего конкретного контекста. Что имеет больше смысла для вас, программиста? Есть много способов достичь одной и той же цели, и нет «правильного» или «неправильного» выбора. Если вам нужно получить элемент по его идентификатору, используйте .getElementByID. Это, вероятно, поможет вам, а также улучшит читаемость вашего кода. Если вам нужно получить класс элементов для оформления страницы, используйте .getElementsByClassName. Если вам нужно получить несколько совершенно разных элементов, вам может подойти .querySelectorAll.
Процитированные работы:
Фердинанди, Крис. Производительность селектора JavaScript. Go Make Things RSS, https://gomakethings.com/javascript-selector-performance/
Лэйн, Селеста. HTMLCOLLECTION против Nodelist. Medium, Medium, 19 августа 2019 г., https://medium.com/@layne_celeste/htmlcollection-vs-nodelist-4b83e3a4fb4b.
Веб-документы MDN, https://developer.mozilla.org/en-US/.
Дом. Стандарт DOM, 4 октября 2022 г., https://dom.spec.whatwg.org/.
