Doğru JavaScript seçicisini seçərək məyusluqdan necə qaçınmaq olar

Seçicilərin kodunuzu necə təsir etdiyinə dair qısa məlumat

Bir layihə üzərində işləyərkən kodumda bir problemlə qarşılaşdım. Bir kolleksiyada birdən çox HTML elementini təyin etməyə və sonra müəyyən qurulmuş şərtlərə əsasən bu elementləri dəyişdirməyə çalışdım. Təxminən dörd saatlıq kodlama vaxtı ilə (iki gün ərzində) kodumu düzəltmək və istədiyim nəticəni niyə əldə etmədiyimi başa düşməklə mübarizə apardım.

Elementlərimi dəyişənə təyin etmək üçün document.querySelectorAll () istifadə etdiyim məlum oldu və sonra bu elementləri dəyişdirməyə çalışdım. Yalnız problem, verilən bir JavaScript seçicinin qovşaqların statik siyahısını qaytarmasıdır. Elementlərin canlı nümayişi olmadığı üçün kodumda daha sonra dəyişdirə bilmədim.

Fərziyyələr

Bu yazıda bəzi şeylərin doğru olduğunu düşünürəm:

  • "Düz və ya Vanil" JavaScript-də işləyirsiniz (çərçivə / kitabxana yoxdur)
  • JavaScript elementləri / seçiciləri haqqında əsas anlayışınız var
  • DOM haqqında əsas anlayışınız var

Qıcqırtı

Çox şey düşündüyüm halda, məqalədə faydalı olacağına inandığım müvafiq materiallara bağlantılar verdim.

JavaScript o qədər geniş və geniş bir ekosistemdir ki, eyni tapşırığı yerinə yetirmək üçün bir çox yolun olması təəccüblü deyil. Tapşırığınızdan asılı olaraq, həyata keçirilmə yolu müəyyən dərəcədə vacibdir.

Əllərinizlə bir çuxur qaza bilərsiniz, ancaq kürəklə etmək çox daha asan və daha səmərəlidir.

Bu məqsədlə bu yazını oxuduqdan sonra sizə bir kürək verəcəyəm.

İş üçün doğru vasitənin seçilməsi

Bir neçə dəfə mənə "Hansı element seçicisini istifadə etməliyəm?" İndiyə qədər kodum istədiyim nəticəni verdiyi müddətdə bu kimi hiss etmirdim və ya fərqi öyrənməli idim. Sizi təhlükəsiz və vaxtında təyinat yerinə çatdıracaqsa, taksinin rəngi nə deməkdir?

JavaScript-də DOM elementlərini seçmək üçün bir neçə metoddan başlayaq. Maddələr seçməyin (düşünürəm) daha çox yolu var, amma burada sadalananlar ən çox yayılmışdır.

document.getElementById ()

Bunlar yalnız bir (1) element qaytarır, çünki identifikatorlar təbiətinə görə unikaldır və səhifədə yalnız bir element (eyni adda) ola bilər.

Göndərilən sətrə uyğun bir obyekt qaytarır. HTML-də uyğun bir identifikator tapılmadıqda sıfır qayıdır.

Sintaksis nümunəsi -> document.getElementById ('main_content')

Bu məqalədə daha sonra müzakirə edəcəyimiz bəzi seçicilərdən fərqli olaraq, element identifikatorunu göstərmək üçün # tələb olunmur.

document.getElementsByTagName ()

Elementlərdəki "S" işarəsinə diqqət yetirin. Bu seçici, HTML Koleksiyonu kimi tanınan bir sıra kimi bir quruluşda birdən çoxunu qaytarır. Kök düyünü (sənəd obyekti) daxil olmaqla bütün sənəd uyğun bir ad axtarılır. Bu element seçimi sənədin yuxarı hissəsində başlayır və davam edir. Keçən sətrə uyğun etiketlər axtarır.

Yerli sıra metodlarından istifadə etmək istəyirsinizsə, qismət olmusunuz. Bu, yalnız qaytarılmış nəticələri təkrarlamaq üçün bir massivə çevirdiyiniz və ya ES6 paylama operatorundan istifadə etdiyiniz halda tətbiq olunur - hər ikisi də bu məqalənin əhatə dairəsindən kənardadır. Ancaq istəsən dizi metodlarından istifadə etmək mümkün olduğunu bilmək istərdim.

Sintaksis nümunəsi -> document.getElementsByTagName ('header_links'). Bu seçici ayrıca p, div, gövdə və ya digər etibarlı HTML etiketlərini qəbul edir.

document.getElementsByClassName ()

Sinif Adı Seçici - Buradakı elementlərdəki "S" qeyd edin. Bu seçici, sinif adlarının HTML kolleksiyası kimi tanınan bir sıra kimi bir quruluşda birdən çoxunu qaytarır. Keçirilən sətirə uyğundur (boşluqla ayrılsa da birdən çox sinif adı götürə bilər), sənədin hamısını axtarır, istənilən element üçün çağırıla bilər və yalnız ötürülmüş sinfin nəsillərini qaytarır.

Həm də yox. Sinif adını müəyyənləşdirmək üçün (Dövr) tələb olunur

Sintaksis nümunəsi -> document.getElementsByClassName ('className')

document.querySelector ()

Bu seçici yalnız bir (1) element qaytarır.

Yalnız ötürülmüş sətrə uyğun gələn ilk element qaytarılır. Göstərilən sətir üçün heç bir uyğunluq tapılmasa, null qaytarılır.

Sintaksis nümunəsi -> document.querySelector ("# side_note") or document.querySelector (". Header_links")

Əvvəlki nümunələrimizin hamısından fərqli olaraq bu seçici a tələb edir. (Dövr) bir sinfi bildirmək və ya bir kimliyi göstərmək üçün # (Octothorp) və bütün CSS seçiciləri ilə işləmək.

document.querySelectorAll ()

Bu seçici ötürülən sətrə uyğun çoxluqları qaytarır və onları qovşaq siyahısı adlanan bir sıra bənzər bir quruluşda düzəldir.

Əvvəlki bəzi nümunələrdə olduğu kimi, qovşaq siyahısı da .forEach () kimi yerli sıra metodlarından istifadə edə bilməz. Beləliklə, bunlardan istifadə etmək istəyirsinizsə, əvvəlcə qovşaq siyahısını bir sıra halına gətirməlisiniz. Dönüştürmək istəmirsinizsə, hələ də ... ifadəsindəki qovşaq siyahısını təkrarlaya bilərsiniz.

Keçirilən sətir etibarlı bir CSS seçicisinə uyğun olmalıdır - ID, sinif adları, növlər, atributlar, atributların dəyərləri və s.

Sintaksis nümunəsi -> document.querySelectorAll ('. Footer_links')

Bükün

Kodlaşdırma ehtiyaclarınız üçün doğru seçicini seçmək, içimdə yaşadığım bir çox tələlərin qarşısını alacaq. Kodunuz işləmədikdə inanılmaz dərəcədə sinir bozucu ola bilər. Bununla yanaşı, seçicinizin situasiya ehtiyaclarınıza uyğun olduğundan əmin olsanız, kürəklə asanlıqla “qazmaq” olar :)

Bu yazını oxuduğunuz üçün təşəkkür edirəm. Əgər bəyəndinizsə, başqalarının da tapa bilməsi üçün biraz dedikodu bağışları etməyi düşünün. Blogumda əlaqəli məzmun göndərirəm (daha çox yazmaq üçün cədvəlimi aktiv şəkildə idarə edirəm). Mən də Twitter-də aktivəm və digər inkişaf etdiricilərlə əlaqə qurmaqdan həmişə məmnunam!