Как да избегнете разочарованието, като изберете правилния селектор на 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 ('header_li nks '). Този селектор също приема ts p, div, body или друг валиден HTML t ag.

document.getElementsByClassName ()

Селектор на име на клас - отново забележете „S“ в елементите - този селектор връща кратни числав масивна структураизвестен като HTML колекция от имена на класове. Той съответства на предадения низ (може да вземе множество имена на класове, въпреки че са разделени с интервал), търси целия документ, може да бъде извикан на всеки елемент и връща само потомци на предадения в класа.

Също така, не. (точка) е необходима за обозначаване на името на класа

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

document.querySelector ()

Този селектор ще връща само един (1) елемент.

Ще бъде върнат само първият елемент, съответстващ на предадения низ. Ако не са намерени съвпадения за предоставения низ, нуласе връща.

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

За разлика от всички наши предишни примери, този селектор изисква a. (точка) за означаване на клас или # (октоторп) за означаване на идентификатор и работи с всички селектори на CSS.

document.querySelectorAll ()

Този селектор връща кратни числа, които съответстват на предадения низ и ги подрежда в друг масив като структура, известна като списък с възли.

Както при някои от предишните примери, списъкът с възли не може да използва естествени методи на масив като .forEach (). Така че, ако искате да ги използвате, първо трябва да конвертирате списъка с възли в масив. Ако не искате да конвертирате, все още можете да прегледате списъка с възли с изявление за….

Предаденият в низ трябва да съвпада с валиден CSS селектор - id, имена на класове, типове, атрибути, стойности на атрибути и т.н.

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

Обобщавайки

Избирайки подходящия селектор за вашите нужди от кодиране, ще избегнете много от клопките, в които съм попаднал. Може да бъде неприятно, ако кодът ви не работи, но като гарантирате, че вашият селектор отговаря на вашите ситуационни нужди, няма да имате проблеми с „копаенето с лопатата“ :)

Благодаря ви, че прочетохте тази публикация. Ако ви е харесало, моля, помислете дали да дарите някои пляски, за да помогнете и на другите да го намерят. Публикувам (активно управлявайки графика си, за да пиша повече) свързано съдържание в моя блог. Също така съм активен в Twitter и винаги се радвам да се свържа с други разработчици!