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

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

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

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

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

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

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

Суровый

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

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

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

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

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

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

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

document.getElementById ()

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

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

Пример синтаксиса - & g t; document.getElementById ('main_conten t')

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

document.getElementsByTagName ()

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

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

Пример синтаксиса - & g t; document.getElementsByTagName ('заголовочные_книги '). Этот селектор также принимает теги p, div, body или любые другие допустимые теги HTML .

document.getElementsByClassName ()

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

Также нет. (период) необходим для обозначения имени класса

Пример синтаксиса: document.getElementsByClassName ('classNam e')

document.querySelector ()

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

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

Пример синтаксиса: document.querySelector ('# side_note ') или document.querySelector ('. Header_link s')

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

document.querySelectorAll ()

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

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

Переданная строка должна соответствовать допустимому селектору CSS - идентификатору, именам классов, типам, атрибутам, значениям атрибутов и т. Д.

Пример синтаксиса: document.querySelectorAll ('. Footer_link s')

Подведение итогов

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

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