Domača » Kodiranje » 15 JavaScript metode za DOM manipulacijo za spletne razvijalce

    15 JavaScript metode za DOM manipulacijo za spletne razvijalce

    Kot spletni razvijalec pogosto potrebujete manipulacijo DOM, objektni model, ki ga uporabljajo brskalniki določite logično strukturo spletnih strani in na podlagi te strukture prikaže elemente HTML na zaslonu.

    HTML določa privzeta struktura DOM. V mnogih primerih pa boste morda želeli s tem upravljati z JavaScriptom, običajno, da bi dodajte dodatne funkcije na spletno mesto.

    IMAGE: Google Razvijalci

    V tej objavi boste našli seznam 15 osnovnih metod JavaScripta to pomoč manipulaciji DOM. Te metode boste verjetno pogosto uporabljali v svoji kodi in nanje boste naleteli tudi v naših vajah za JavaScript.

    1. querySelector ()

    The querySelector () metodo vrne prvi element, ki se ujema z enim ali več selektorji CSS. Če ne najdete nobenega ujemanja, se vrne nič.

    Pred tem querySelector () je bil uveden, razvijalci široko uporabljajo getElementById () metodo, ki pridobiva element s podanim id vrednost.

    Čeprav getElementById () je še vedno uporabna metoda, vendar z novejšo querySelector () in querySelectorAll () metode, do katerih smo svobodni ciljnih elementov, ki temeljijo na izbirniku CSS, zato imamo več prožnosti.

    Sintaksa
    var ele = document.querySelector (izbirnik);
    • ele - Prvi element ujemanja ali nič (če noben element ne ustreza selektorjem)
    • izbirnik - enega ali več CSS selektorjev, kot npr "#fooId", ".fooClassName", ".class1.class2", ali ".class1, .class2"
    Primer kode

    V tem primeru prvi

    izbere z querySelector () metoda in njena barva se spremeni v rdečo.

     
    prvega odstavka
     
    drugega odstavka
     
    div ena
     
    odstavka tretjega odstavka
     
    div dva
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rdeča';
    Interaktivna predstavitev

    Preizkusite querySelector () v naslednji interaktivni demo. Preprosto vtipkajte izbirnik, ki ustreza tistim, ki jih najdete v modrih poljih (npr. #three) in kliknite gumb Izberi. Upoštevajte, če vnesete .blok, samo na prvi stopnji bo izbran.

    2. querySelectorAll ()

    Za razliko od querySelector () ki vrne samo prvi primerek vseh ujemajočih se elementov, querySelectorAll () vrne vse elemente, ki se ujemajo z izbranim izbirnikom CSS.

    Elementi ujemanja se vrnejo kot NodeList objekt, ki bo prazen objekt, če ne najdemo ustreznih elementov.

    Sintaksa
    var eles = document.querySelectorAll (izbirnik);
    • eles - A NodeList predmet z vsemi ujemajočimi se elementi kot vrednostmi lastnosti. Če ni najdenih zadetkov, je objekt prazen.
    • izbirnik - enega ali več CSS selektorjev, kot npr "#fooId", ".fooClassName", ".class1.class2", ali ".class1, .class2"
    Primer kode

    Spodnji primer uporablja isti HTML kot prejšnji. Vendar pa so v tem primeru z odstavki izbrani vsi odstavki querySelectorAll (), in so obarvani modro.

     
    prvega odstavka
     
    drugega odstavka
     
    div ena
     
    odstavka tretjega odstavka
     
    div dva
     
     var odstavki = document.querySelectorAll ('p'); za (var p odstavkov) p.style.color = 'blue';

    3. addEventListener ()

    Dogodki nanašajte se na to, kaj se zgodi z elementom HTML, kot je klik, fokusiranje ali nalaganje, na katerega se lahko odzovemo s JavaScriptom. Funkcijam JS lahko pripišemo funkcije poslušaj za te dogodke v elementih in narediti nekaj, ko se je dogodek zgodil.

    Obstajajo trije načini dodelite funkcijo določenemu dogodku.

    Če foo () je funkcija po meri, jo lahko registrirate kot poslušalec dogodka klikanja (pokličite ga, ko kliknete element gumba) na tri načine:

    1.  
    2.  var btn = document.querySelector ('gumb'); btn.onclick = foo;
    3.  var btn = document.querySelector ('gumb'); btn.addEventListener ('klik', foo);

    Metoda addEventListener () (tretja rešitev) nekaj prednosti; to je najnovejši standard - ki omogoča dodelitev več kot ene funkcije kot poslušalce dogodkov enemu dogodku - in ima uporaben nabor možnosti.

    Sintaksa
    ele.addEventListener (evt, poslušalec, [možnosti]);
    • ele - Element HTML, ki ga bo poslušalec dogodka poslušal.
    • evt - Ciljni dogodek.
    • poslušalca - Značilno je funkcija JavaScript.
    • opcije - (neobvezno) Objekt z nizom boolskih lastnosti (našteto spodaj).
    Opcije Kaj se zgodi, ko je nastavljeno na prav?
    zajem

    Ustavi mehurjanje dogodkov, tj. Preprečuje klicanje poslušalcev dogodkov za isti tip dogodka v prednikih elementov.

    Če želite uporabiti to funkcijo, lahko uporabite 2 sintaksi:

    1. ele.addEventListener (evt, poslušalec, res)
    2. ele.addEventListener (evt, poslušalec, zajem: res);
    enkrat

    Poslušalec se imenuje samo prvič, ko se dogodek zgodi, nato pa se samodejno loči od dogodka in ga ne bo več sprožil..
    pasivno

    Privzetega dejanja dogodka ni mogoče zaustaviti z metodo preventDefault ().
    Primer kode

    V tem primeru dodamo poslušalca dogodka klika foo, do 

     var btn = document.querySelector ('gumb'); btn.addEventListener ('klik', foo); funkcija foo () alert ('hello');
    Interaktivna predstavitev

    Dodeli foo () funkcijo po meri kot poslušalca dogodka na katerega koli od naslednjih treh dogodkov: vnos, kliknite ali miško in sprožite izbrani dogodek v spodnjem vnosnem polju tako, da ga premaknete, kliknete ali vnesete.

    4. removeEventListener ()

    The removeEventListener () metodo odvzame poslušalca dogodka predhodno dodane s addEventListener () metodo od dogodka, ki ga poslušate.

    Sintaksa
    ele.removeEventListener (evt, poslušalec, [možnosti]);

    Uporablja isto sintakso kot prej omenjeno addEventListener () (razen za. \ t enkrat možnost, ki je izključena). Možnosti so uporabljene, da so zelo specifične glede identifikacije poslušalca, ki ga želite ločiti.

    Primer kode

    Sledite kodeksu, ki smo ga uporabili pri addEventListener (), tukaj odstranimo poslušalca dogodka klikanja foo Iz