Како избећи фрустрацију избором правог ЈаваСцрипт селектора

Кратки водич о томе како бирачи утичу на ваш код

Током рада на пројекту, наишао сам на проблем у свом коду. Покушавао сам да дефинишем више ХТМЛ елемената у колекцију, а затим их променим на основу неких унапред постављених услова. Борио сам се отприлике четири сата кодирања (током два дана) отклањајући грешке у свом коду и покушавајући да схватим зашто нисам постигао жељени исход.

Испоставило се да сам користио доцумент.куериСелецторАлл () да доделим своје елементе променљивој, а затим сам покушавао да променим те елементе. Једини проблем је што одређени ЈаваСцрипт селектор враћа статичку листу чворова . Будући да то није живо представљање елемената, нисам их касније могао променити у свом коду.

Претпоставке

У овом чланку претпостављам да је неколико ствари тачно:

  • Радите у „обичном или ванилином“ ЈаваСцрипт-у (без оквира / библиотеке)
  • Имате основно разумевање ЈаваСцрипт елемената / селектора
  • Имате основно разумевање ДОМ-а

Гњидави

У случају да претпоставим превише, дао сам линкове до релевантног материјала у чланку за који се надам да ће бити од помоћи.

ЈаваСцрипт је толико широк и богат екосистем да није изненађење да постоји много начина за извршавање истог задатка. Зависно од вашег задатка, начин на који је извршен важан је до одређене мере.

Можете рупу ископати рукама, али то је много лакше и ефикасније учинити лопатом.

У том циљу, надам се да ћу вам „предати лопату“ након што прочитате овај чланак.

Избор правог алата за посао

Имао сам питање: „Који бирач елемената да користим?“ неколико пута. До сада нисам имао превише жеље нити потребе да научим разлику све док је мој код давао жељени резултат. На крају, каква је важност боје таксија све док вас сигурно и правовремено води до одредишта ... зар не?

Почнимо са неким од начина за одабир ДОМ елемената у ЈаваСцрипт-у. Постоји више начина (верујем) за одабир елемената, али они који су овде наведени далеко су најзаступљенији на које сам наишао.

доцумент.гетЕлементБиИд ()

Они ће вратити само један (1) елемент, јер су по својој природи ИД јединствени и на страници може бити само један (са истим именом) одједном.

Враћа објекат који се подудара са низом који је у њега прослеђен. Враћа нулу ако у вашем ХТМЛ-у није пронађен одговарајући ИД.

Пример синтаксе - & г т; доцумент.гетЕлементБиИд ('маин_цонтен т')

За разлику од неких селектора на које ћемо доћи касније у чланку, за ознаку елемента # није потребан знак #.

доцумент.гетЕлементсБиТагНаме ()

Обратите пажњу на „С“ у елементима - овај бирач враћа вишеструкеу структури налик на низпозната као ХТМЛ колекција - претражује се цео документ, укључујући коријенски чвор (објекат документа), за тражено име. Овај бирач елемената започиње на врху документа и наставља се надоле, тражећи ознаке које се подударају са прослеђеним низом.

Ако желите да користите методе матичног низа, немате среће. Односно, ако не претворите враћене резултате у низ да бисте их превртали или не користите ЕС6 оператор ширења - и једно и друго је изван делокруга овог чланка. Али желео сам да знате да је могуће користити методе низа ако желите.

Пример синтаксе - & г т; доцумент.гетЕлементсБиТагНаме ('хеадер_ли нкс'). Овај селектор такође прихвата тс п, див, боди или било који други важећи ХТМЛ т аг.

доцумент.гетЕлементсБиЦлассНаме ()

Бирач назива класе - поново приметите „С“ у елементима - овај селектор враћа вишеструке вредностиу структури налик на низпозната као ХТМЛ колекција имена класа. Поклапа се са прослеђеним низом (може узети више имена класа, иако су одвојена размаком), претражује цео документ, може се позвати на било ком елементу и враћа само потомке прослеђеног у класи.

Такође, бр. (тачка) је потребна за означавање назива класе

Пример синтаксе: доцумент.гетЕлементсБиЦлассНаме ('цлассНам е')

доцумент.куериСелецтор ()

Овај селектор ће вратити само један (1) елемент.

Вратиће се само први елемент који се подудара са пренетим низом. Ако није пронађено ниједно подударање за наведени низ, нуллсе враћа.

Пример синтаксе: доцумент.куериСелецтор ('# сиде_ноте ') или доцумент.куериСелецтор ('. Хеадер_линк с')

За разлику од свих наших претходних примера, овај селектор захтева а. ( тачка ) за означавање класе или # (оцтотхорп) за означавање ИД-а и ради са свим ЦСС селекторима.

доцумент.куериСелецторАлл ()

Овај селектор враћа вишекратнике који се подударају са прослеђеним низом и распоређује их у други низ попут структуре познате као листа чворова.

Као и код неких од претходних примера, листа чворова не може да користи матичне методе низа попут .форЕацх (). Дакле, ако желите да их користите, прво морате претворити листу чворова у низ. Ако не желите да претворите, још увек можете да прелистате листу чворова са изјавом фор….

Прослеђени низ мора одговарати важећем ЦСС селектору - ид, називима класа, типовима, атрибутима, вредностима атрибута итд.

Пример синтаксе: доцумент.куериСелецторАлл ('. Фоотер_линк с')

Окончање

Одабиром правог селектора за ваше потребе кодирања, избећи ћете многе замке у које сам упао. То може бити невероватно фрустрирајуће када ваш код не ради, али осигуравајући да ваш селектор одговара вашим ситуационим потребама, нећете имати проблема са „копањем лопатом“ :)

Хвала вам што сте прочитали овај пост. Ако сте уживали, размислите о томе да донирате неке пљеске како бисте помогли и другима да га пронађу. Објављујем (активно управљам својим распоредом за писање више) садржај на свом блогу. Такође сам активан на Твиттер-у и увек се радо повежем са другим програмерима!