Javascript ilə DOM-a necə üstünlük vermək olar

DOM bəzən olduqca qorxuducu ola bilər. Yəni, belə bir qısaltma ilə manipulyasiya edə biləcəyimiz interfeysdən daha çox bir ev DJ-sinə oxşayırıq!

Amma dostlarımı işlətməyin, mən bunu edə biləcəyimizi söyləmək üçün buradayam! Yalnız kontekstləşdirmək və icra etmək lazımdır. Bir dəfə onu parçaladıqda, qısa müddətdə DOMİNATİN olacağıq.

Bu yazı əhatə edir:

  1. DOM nədir?
  2. Niyə əhəmiyyəti var?
  3. JavaScript ilə necə hücum edim?

Gəlin dərhal dalaq və fəth etməyə başlayaq!

Sənəd Obyekt Modeli - DOM

DOM nədir?

Daha əvvəl də qeyd edildiyi kimi, DOM, Sənəd Nesnə Modelinin qısaltmasıdır. Sənəd obyekti modelinin fikri DOM-un əsas funksiyasına əsaslanır: HTML kodumuzun əyani nümayəndəliyini yaratmaq. Bu, veb səhifələrimizdə proqnozlaşdırılan gördüklərimizin sərt kodlanmış HTML deyil, bunun bir təmsilçiliyi deməkdir.

Nümayəndəlik sənəd və içindəki obyektlərdən ibarətdir. Obyektlər düyün obyektlərinə çevrilmiş HTML elementləridir. Dinamik hərəkətlər yaratmaq üçün bu qovşaqları daha sonra hədəf alacağıq və redaktə edəcəyik. DOM öz növbəsində bunu bir təqdimata çevirir, beləliklə hardcoded HTML-lərimizin heç biri təsirlənmir.

DOM-u təsəvvür etməyin asan yolu HTML-inin veb səhifələrimiz üçün vizual təqdimata çevirməsidir. Bunu dəyişdirmək üçün müəyyən DOM sintaksisindən istifadə etməliyik.

HTML / DOM münasibətlərini konseptləşdirməyin başqa bir yolu, onu məktəbdə oxuduğumuz köhnə proyektorlardan biri kimi düşünməkdir:

Bunu kimsə xatırlayır?

Metafora belə işləyir:

  1. Proyektorun üstünə qoyulmuş şəffaf kağız parçası bizim HTML-dir.
  2. Proyektor HTML-ni DOM nümayəndəliyinə çevirmək üçün çalışan brauzerimizdir.
  3. Lövhədəki proyeksiya bir brauzerdə (veb saytımızda) HTML-nin DOM nümayəndəliyidir.
  4. Müəllimimizin şəffaf kağız üzərində yazdığı bütün qeydlərlə DOM-u manipulyasiya etməyə çalışırıq.

Kağızda nə qədər qeyd etsək də, mənbə mətnimiz heç vaxt tamamilə dəyişdirilmir: həmişə orijinal quruluşu və formatı qoruyur. Xanım O'Malley-nin qələmini yenidən qalıcı bir markerlə əvəzləmədikcə!

Bütün zarafatlar bir yana, inşallah bu DOM dizaynında kömək edir.

Yoxlanılması üçün:

  1. HTML yazırıq
  2. Daha sonra brauzerimiz vasitəsilə şərh olunur və bir veb saytda göstərilir. Bu nümayəndəlik DOM-dur.
  3. DOM nümayəndəliyini daha sonra düzəldəcəyik, ancaq bu HTML-nizə zərər verməyəcəkdir.

Hamısını düzəltsək olduqca asan? Bununla birlikdə, DOM təmsilçiliyinin bəzi nüanslarını bir az daha pozmalıyıq.

Daha əvvəl də qeyd etdiyim kimi, HTML-ni proyeksiya edərkən hər element düyünlərlə təmsil olunur. "Düyün" sözü qorxuducu görünə bilər, ancaq təsvir yalnız bizim elementlərimizdir! Daha sonra, düyünlərimizi idarə etməyə çalışdığımız zaman, bu, çalışdığımız hədəflərə çevrilir.

Nəhayət, DOM-un həqiqətən bir API olduğunu qeyd etmək istərdim. Xüsusi olaraq JavaScript üçün deyil, bir neçə kodlaşdırma dili üçün hazırlanmışdır. DOM-dan aldığımız obyektlər onları hədəf aldıqda, geri qaytardıqda və manipulyasiya etdiyimizdə öyrəndiklərimizdən fərqli görünə bildiyindən həyata keçirməyə başladığımızda bunu unutmayın.

Bunu bilməklə unikal obyektləri qəbul etməyə, onları çevirməyə və düzgün şəkildə idarə etməyə hazırlaşa bilərik.

Niyə vacibdir?

DOM veb saytlarımızı idarə etmək üçün bizə infrastruktur təmin etdiyi üçün vacibdir. Bu, unikal istifadəçi təcrübələrini fərdiləşdirməyimizə və ya veb məzmunu dinamik şəkildə yeniləməyimizə imkan yaradır!

Veb saytımızın yüksək keyfiyyətli veb sayt kimi tanınmasını istəyiriksə, bu funksiyaya ehtiyacımız var. DOM-un necə işlədiyini və necə keçdiyimizi anlamaq veb saytlarımızın maraqlı olmasına kömək edə bilər.

Bu, özünüzü DOM-a daxil olmaq və idarə etmək üçün alətlərlə təchiz etməliyik deməkdir! Davam edin və DOM-un yuvarlanması üçün lazım olan hər şeyi tapın.

DOM ilə işə başlamaq - hədəfləmə və manipulyasiya.

Veb saytımızda bir obyektlə manipulyasiya etmək istədiyimiz bir vəziyyətə yaxınlaşdıqda dərhal iki şey düşünməliyik:

  1. Bu obyekti necə hədəf alıram?
  2. İstədiyiniz vəziyyəti necə əldə edə bilərəm?

Bu sualları özümüzə verəndə DOM inanılmaz dərəcədə idarəolunan olur. Əvvəlcə elementləri hədəf seçməyi və sonra dəyişiklikləri tətbiq etməyimiz bizə DOM-u sarsıtmaq üçün əsas alətlər verir.

Məqsəd necədir

Bir şeyi manipulyasiya etmək üçün ona çatmağımız lazımdır. Javascriptdə bunu edə bilən bir neçə metod mövcuddur.

Bu metodlar DOM-u bir dəyər axtarır və sonra əlaqəli obyekti qaytarır. Bu dəyərlər etiketlər, siniflər, şəxsiyyət vəsiqələri, valideynlər və ya qardaşlar ola bilər. Hər şey bizim təqdim etdiyimiz vəziyyətdən asılıdır.

Bir obyektimiz olduqdan sonra bunu etmənin ən yaxşı yolu onu dəyişəndə ​​saxlamaqdır. Beləliklə, onu yenidən hədəfləməli olsaq, dərhal maddəyə başlaya bilərik.

Bunu hərəkətdə gördükdən sonra bunun mənası olacaqdır. Bununla birlikdə, bir obyekti hədəf aldığımızı və sonra onu qurtardığımızı başa düşdüyümüz müddətdə, DOM-u manipulyasiya etmənin yolundayız.

Hedeflemeye başlamaq üçün bir neçə metod öyrənməliyik. Budur obyektlərin hədəflənməsi və həyata keçirilməsi üçün ən yaxşı metodların siyahısı.

GetElementBy üsulları ilə

Bu metodlar səhifəmizin müəyyən bir komponentini hədəf alaraq bizə geri göndərməyimizə imkan verir. Bunlar konkret məzmunun hədəfli bir şəkildə istifadə edilməsinin spesifik metodlarıdır.

1.) document.getElementByTagName ('tagname'); Bu şəkildə sənədimizdəki elementləri etiket adlarına görə həll edə bilərik. Məsələn, seçdiyimiz bir p, h1 və ya bölmə etiketini hədəf ala bilərik. CSS sintaksisimizlə iç içə etiketləri də hədəf ala bilərik: document.getElementByTagName ('bölüm p');
2.) document.getElementById ('idname'); Yuxarıdakı nümunəmizə bənzəyir, yalnız şəxsiyyət vəsiqəsi ilə işarələdiyimiz obyektin qaytarılması istisna olmaqla. document.getElementById ('# heroHeader');
3.) document.getElementByClassName ('className'); Lasty, bu metod bir sinif adı alır və xüsusi obyekti və ya HTML kolleksiyasını qaytarır. Sinifdə bu şəkildə adlandırılan birdən çox obyekt varsa, HTML kolleksiyasını əldə edirik. HTML koleksiyonları, manipulyasiya edə bildiyimiz massivə bənzər obyektlərdir. Lakin metodlarınız məhdudlaşdırıcı ola bilər, bu səbəbdən bu kolleksiyaları massivlərə çevirmək üçün Array.from () istifadə etmək bu problemlə mübarizə üçün yaxşı bir yoldur. document.getElementById ('. main-content');

Sorğu seçmə metodları

Sorğu seçiciləri əladır, çünki element seçicilərindən fərqli olaraq nəyə ehtiyacımız olduğuna dair çevik ola bilərik:

1.) document.querySelector ('tagname' || '#idName' || '.className'); QuerySelector () ilə daxil olduğumuz hər hansı bir hədəfi hədəfləyə bilərik. Eyni adda birdən çox obyekt varsa, tapılan ilk obyekt qaytarılır. document.querySelector ('p'); document.querySelector ('# heroHeader'); document.querySelector ('. main-content');
2.) document.querySelectorAll ('tagname' || '#idName' || '.className'); QuerySelectorAll () ilə məzmunu querySelector () ilə eyni şəkildə düzəldə bilərik. Lakin, bir obyekt qaytarmaq əvəzinə etiket və ya sinif adına uyğun gələn bütün obyektləri qaytarır. Geri qaytarıldıqda, bir qovşaq siyahısı şəklində çatdırılır. HTMLCollections kimi, düyün siyahıları manipulyasiya edə biləcəyimiz massiv bənzər obyektlərdir. Yenidən başqa metodlara giriş ehtiyacımız varsa, Array.from () metodunu istifadə edərək çevirə bilərik.
document.querySelectorAll ('bölmə p'); -> document.querySelectorAll ('. Text-content') bölmə etiketlərindəki bütün p-etiketləri qaytarır; -> .text-content məzmunu ilə bütün əşyaları verir.

Həzm etmək üçün çox şey var, amma bilin ki, bunların hamısı DOM-dakı bir elementi hədəf almaq və bizə qaytarmaq üçün hazırlanmışdır. Bəzən bir sıra kimi bir quruluş şəklində bir NodeList və ya HTML kolleksiyası alırıq. Bu vəziyyətdə, bu siyahıda HƏR bir maddəyə dəyişiklik tətbiq etmək üçün forEach () metodunu verməyi unutmayın.

QuerySelectors və ya getElementBys çağırırıq, bunları da bir konst və ya bir icazə təyin etməlisiniz. Bu şəkildə hədəflərimizi kodumuz boyunca yenidən istifadə edə bilərik.

Məsələn: const header = document.querySelector ('header');

Sadə şeylər, amma bilmək vacibdir!

Stil və məzmunu idarə etmək üçün:

Məzmununuzun konkret olaraq necə düzəldiləcəyini bildiyimiz üçün onu idarə edə bilərik. Etmək istədiyimiz üç böyük şey bir obyektin stilini özəlləşdirmək, mətnin məzmununu dəyişdirmək və ya quruluşumuza yeni bir element əlavə etməkdir.

Bunu etmək üçün metodlarla və bir az CSS ilə daha çox məşğul olmalıyıq!

üslub

Obyektləri tərtib etmək üçün iki şey edə bilərik. Bir .style metodundan istifadə edə və ya CSS-də bir sinif yarada bilərik və ya bunu JavaScript-i vasitəsilə təyin edə və ya dəyişə bilərik.

.Style:

.Style bir obyektin CSS üslubunu hədəf ala və istədiyimiz CSS xüsusiyyətlərini tətbiq edə bilərik. Ancaq bunlar obyektlərimizə tətbiq edildikdə, satır içi üslub kimi tətbiq olunur.

Bunu hədəf hədəflərimizdən birinə təyin edərək kodumuzda tətbiq edirik. Deyək ki, başlıq etiketimizi sabitdə saxladıq və bir funksiya yerinə yetirildikdə arxa planı fərdiləşdirmək istəyirik. Kod yaratma yolumuz:

const header = document.querySelector ('başlıq'); // 1
const backgroundChange = function () {// 2 header.style.background = "pink"; // 3}
backgroundChange (); // 4

Kod yığını belə görünür:

  1. Başlığımızı dəyişənə təyin edirik.
  2. Daha sonra Arxa fon dəyişdir funksiyasını yaradırıq.
  3. Başlıq fonunun özəlləşdirilməsini funksiya daxilində saxlayırıq.
  4. Səhifənin altındakı funksiyanı çağırırıq.

Arxa planımızın yalnız bir funksiya tərəfindən çağırıldığı zaman deyil, həm də çəhrayı olmasını istəyiriksə, yalnız funksiya sintaksisini təmizləyə və run təyin edə bilərik:

const header = document.querySelector ('başlıq'); header.style.background = "çəhrayı";

Bu cür üslubların funksiyada saxlanılması pis bir fikir deyil, çünki hərəkətləri "qoruyur" və onu adlandırdığımız zaman həyata keçirilə bilər.

Böyük yanaşma

Üslubları tətbiq etməyin başqa bir yolu bir CSS sinfi yaratmaq və sonra JavaScript vasitəsilə istədiyiniz elementə əlavə etməkdir. Bu yalnız axmaqlıq kimi görünə bilər, çünki bunu yalnız CSS istifadə edərək təyin edə bilərik, lakin JS istifadə edərək dinamik şəkildə yeniləyə bilsək, komponentlər yaratmağa başlamağımız məsləhətdir!

Addım 1: bəzi CSS yaz.

Əvvəlcə daha sonra hədəfimizə tətbiq edəcəyimiz bir CSS sinfi yaratmalıyıq. Bu nümunədə bir şeyi yox edək! Bunu etmək üçün ekranı "Blok" dan "Yox" a keçiririk.

CSS kodumuz:

.disappear {display: none; }

CSS yazmaq bizim üçün köhnə papaqdır, indi yeni şeylər üçün.

JS kodumuz:

P-etiketlərimizi hədəf alaq və mətnimizi yox edək!

const pTags = document.querySelectorAll ('p');
pTags.forEach (function (p) {p.classList.add ('yox olmaq')})

Səhifəmizi yükləyən kimi bütün p-etiketlərimiz yox olur! Əvvəlki kimi, səhifə yüklənəndə icra olunmaması üçün bu kodu bir funksiyada saxlaya bilərik.

ForEach () nin burada necə tətbiq olunduğunu da görürsünüzmü? QuerySelectorAll () istifadə etdiyimiz üçün qovşaqların siyahısını əldə etdik. Siyahımızdakı hər bir maddəyə düzgün sinfi təyin etmək üçün siyahımızdan keçib hər birini ayrı-ayrı təyin etməli idik. ForEach () metodu bunu həyata keçirmək üçün asan bir yol təqdim edir, eyni zamanda loop for classic ilə eyni şeyi edə bilərik.

Son olaraq .classList və .add metodlarından istifadə etdik. .add .classList metoduna xasdır, çünki hədəfimizi bu sinfi əlavə etməyə yönəldir. Xüsusi bir sinif adını silmək və ya dəyişdirmək üçün .remove () və .toggle () kimi atributlardan da istifadə edə bilərik!

Arsenalımızda .style () və .classList ilə JS-də hər hansı bir üslub probleminin öhdəsindən gəlməyi bacarmalıyıq!

Məzmunu fərdiləşdirin

Burada müzakirə etdiyimiz iki taktika mətn məzmununuzu fərdiləşdirmək və DOM-a yeni elementlər əlavə etməkdir.

Mətnin məzmunu

Mətn məzmununuzu özəlləşdirmək .style () bənzər bir quruluşu izləyir. Əvvəlcə məzmunu xüsusi olaraq düzəltməliyik, sonra .textContent tətbiq edərək mətn tərkibini uyğunlaşdıra bilərik.

const headerTitle = document.querySelector ('. main-title');
headerTitle.textContent = "Mattin Lambda Dəqiqələri."

TextContent istifadə edərək, Matt'dən yenidən təyin olunmuş Lambda qeydlərimizi oxumaq üçün .mövzu mətnimizi yenidən təyin edirik. Olduqca sadə və zəhmli, elə deyilmi?

Məzmunu əlavə edin

DOM-a maddələr əlavə etmək üçün bir şey yaratmalı, düşəcək bir yer seçməli, məzmun əlavə etməli və sonra oraya atmalıyıq. Təsvir etmək üçün əsas məzmununuza əlavə etmək üçün yeni bir abzas yarataq.

Addım 1: bir paraqraf yaradın:

const newParagraph = document.createElement ("p");

Bir element yaratmaq üçün .createElement () istifadə edirik.

Addım 2: Hedef:

const location = document.querySelector ('. main-content');

Bunu yuxarıdan bilirik, indi sadə şeylər!

Adım 3: yeni məhsulumuza məzmun əlavə edin.

.TextContent () əlavə etməyi bildiyimiz üçün bunu yeni p-yə əlavə edək:

newParagraph.textContent = "Bunu necə edəcəyimizi yeni öyrəndik: WOOHOO!"

Addım 4: yerimizə əlavə edin:

Buna nail olmaq üçün bir neçə metoddan istifadə edə bilərik, lakin bu, əsas məzmununuz daxilində yeni səhifəmizi istədiyimizə bağlıdır. Bu vəziyyətdə onu məzmununun sonuna əlavə etmək istəyirik ki, bunu appendChild () metodundan istifadə edərək edə bilərik.

location.appendChild (newParagraph);

Viola! Əsas məzmununa yeni p əlavə etdik! Yaradılan elementlərin DOM-a necə daxil ediləcəyi barədə daha çox məlumat əldə etmək istəyirsinizsə, burada və burada yeni metodlardan bir neçəsinə baxın! Bunları əzbərləmək məcburiyyətində deyilsiniz, ancaq DOM ilə manipulyasiya etməyin yeni yollarını tapmaqda kömək edəcəklər.

Bükün

Orada insanlar var, DOM-u idarə etmək üçün giriş! Bu yeni metodları sınadığınızı və DOM ilə oynayaraq nə qədər əyləncəli şeylər əldə edə biləcəyinizi görəcəyinizə ümid edirəm!

Hər hansı bir sualınız və ya şərhiniz varsa, mənimlə Twitter-də və ya nəşrlər səhifəmdə əlaqə saxlayın.

Həmişə olduğu kimi, xoşbəxt kodlaşdırma!