Как избежать разочарования, выбрав правильный селектор JavaScript

kak izbezhat razocharovaniya vybrav pravilnyj selektor javascript?v=1656582491

Краткое руководство о том, как селекторы влияют на ваш код

Во время работы над проектом я столкнулся с проблемой кода. Я пытался определить несколько элементов HTML в коллекцию и затем изменить эти элементы на основе некоторых предварительно установленных условий. Я боролся примерно четыре часа кодирования (в течение двух дней), отлаживая свой код и пытаясь выяснить, почему я не получил желаемого результата.

Оказалось, что я использовал document.querySelectorAll() чтобы назначить мои элементы переменной, а затем я пытался изменить эти элементы. Единственная проблема состоит в том, что конкретный селектор JavaScript возвращает a статический список узлов. Поскольку это не живое представление элементов, я не смог изменить их позже в своем коде.

Предположения

В этой статье я предполагаю, что несколько вещей являются правдой:

  • Вы работаете на «обычном или ванильном» JavaScript (без рамки/библиотеки)
  • У вас есть базовое понимание элементов/селекторов JavaScript
  • Вы имеете базовое понимание DOM

Совершенно

Если я предположил слишком многое, я предоставил ссылки на соответствующие материалы в статье, которые, надеюсь, будут полезны.

JavaScript – это настолько большая и богатая экосистема, что не удивительно, что существует много способов выполнения одной и той же задачи. В зависимости от вашей задачи в какой-то степени имеет значение способ ее выполнения.

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

С этой целью я надеюсь «вручить вам лопату» после того, как вы прочтете эту статью.

IXLL54yngArOlJqNfITubIlTMhXOrsMuhVkk
«Снимок группы людей на пляже с долгой выдержкой с детьми, копающими глубокую яму», Кюрт Уильямс на Unsplash

Выбор подходящего инструмента для работы

У меня возник вопрос: «Какой селектор элементов я должен использовать?» несколько раз. До сих пор у меня не было особого желания или необходимости изучать разницу, пока мой код давал желаемый результат. В конце концов, какое значение имеет цвет такси, если оно доставит вас в место назначения безопасно и вовремя… верно?

Начнем с некоторых способов выбора DOM элементы в JavaScript. Существует больше способов (я считаю) для выбора элементов, но перечисленные здесь являются наиболее распространенными, с которыми я сталкивался.

document.getElementById()

Они всегда будут возвращать только один (1) элемент, поскольку по своей природе идентификаторы уникальны, и на странице может быть только один (с одинаковым названием) одновременно.

Он возвращает объект, соответствующий переданной в него строке. Оно возвращается ноль если в HTML не найден соответствующий идентификатор.

Пример синтаксиса -> document.getElementById(‘main_contenт’)

В отличие от некоторых селекторов, о которых мы расскажем далее в статье, нет нужды в # для обозначения идентификатора элемента.

document.getElementsByTagName()

Обратите внимание на «S» в элементах – этот селектор возвращает кратные в массивообразная структура известна как коллекция HTML – во всем документе ищется соответствующее имя, включая корневой узел (объект документа). Этот селектор элементов начинается сверху документа и продолжается вниз, ища теги, соответствующие переданной строке.

Если вы хотите использовать собственные методы массива, вам не повезло. То есть если вы не конвертируете полученные результаты в массив для итерации над ними или не используете оператор распространения ES6 — оба из них выходят за рамки этой статьи. Но я хотел, чтобы вы знали, что при желании можно использовать методы массива.

Пример синтаксиса -> document.getElementsByTagName(‘header_links’). Этот селектор также принимаетсяts p, div, body или любой другой действительный HTML tаг.

document.getElementsByClassName()

Селектор названия класса – снова обратите внимание на «S» в элементах – этот селектор возвращает кратные в массивообразная структура известен как HTML-коллекция имен классов. Он соответствует переданной строке (может принимать несколько имен классов, хотя они разделены пробелом), ищет весь документ, может быть вызван для любого элемента и возвращает только потомков переданного в классе.

Кроме того, нет. (точка) необходима для обозначения имени класса

Пример синтаксиса: document.getElementsByClassName(‘classNamд’)

document.querySelector()

Этот селектор всегда возвращает только один (1) элемент.

Будет возвращен только первый элемент, соответствующий переданной строке. Если совпадения для данной строки не найдены, ноль возвращается.

Пример синтаксиса: document.querySelector(‘#side_note‘) или document.querySelector(‘.header_links’)

В отличие от всех наших предыдущих примеров этот селектор требует . (точка) для обозначения класса или an # (octothorp) для обозначения идентификатора и работает со всеми селекторами CSS.

document.querySelectorAll()

Этот селектор возвращается кратные которые соответствуют переданной строке и упорядочивают их на другой структура подобна массиву известен как список узлов.

Как и в предыдущих примерах, список узлов не может использовать собственные методы массива, такие как .forEach(). Итак, если вы хотите их использовать, сначала нужно превратить список узлов в массив. Если вы не хотите конвертировать, вы все равно можете перебирать список узлов с помощью оператора for…in.

Переданная строка должна соответствовать действительному селектору CSS – id, имена классов, типы, атрибуты, значения атрибутов и т.д.

Пример синтаксиса: document.querySelectorAll(‘.footer_links’)

Подведению

Выбрав правильный селектор для ваших нужд кодировки, вы избежите многих подводных камней, в которые я попал. Это может быть невероятно неприятно, когда ваш код не работает, но, убедившись, что ваш селектор отвечает вашим ситуационным потребностям, у вас не будет проблем копать лопатой 🙂

Спасибо, что прочли этот пост. Если вам это понравилось, пожалуйста, рассмотрите возможность пожертвовать несколько хлопков, чтобы помочь другим найти его. Я публикую (активно управляю своим графиком, чтобы писать больше) связанное содержимое в своем блоге. Я тоже активен в Twitter и всегда рад общаться с другими разработчиками!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *