Početna » šifriranje » 15 JavaScript metode za DOM manipulaciju za web-programere

    15 JavaScript metode za DOM manipulaciju za web-programere

    Kao web developer, često morate manipulirati DOM, objektni model koji koriste preglednici odrediti logičku strukturu na temelju ove strukture prikazati HTML elemente na zaslonu.

    HTML definira oznaku zadana DOM struktura. Međutim, u mnogim slučajevima to ćete htjeti manipulirati pomoću JavaScripta, obično kako biste to učinili dodajte dodatne funkcionalnosti na web-lokaciju.

    IMAGE: Google Developers

    U ovom postu naći ćete popis 15 osnovnih JavaScript metoda da pomoć DOM manipulaciji. Te metode vjerojatno ćete često koristiti u svom kodu, a također ćete ih pronaći u našim JavaScript uputama.

    1. querySelector ()

    querySelector () način vraća prvi element koji odgovara jednom ili više CSS selektora. Ako nije pronađen nijedan rezultat, vraća se nula.

    Prije querySelector () je uveden, programeri naširoko koristi parametra getElementByID () metoda koja dohvaća element s određenim iskaznica vrijednost.

    Iako parametra getElementByID () je još uvijek korisna metoda, ali s novijom querySelector () i querySelectorAll () metode kojima smo slobodni ciljnih elemenata na temelju bilo kojeg CSS selektora, stoga imamo veću fleksibilnost.

    Sintaksa
    var ele = document.querySelekktor (selektor);
    • ele - Prvi element podudaranja ili nula (ako nijedan element ne odgovara selektorima)
    • selektor - jedan ili više CSS selektora, kao što je "#FooId", ".FooClassName", ”.Class1.class2", ili ".class1, .class2"
    Primjer koda

    U ovom primjeru prvi

    odabire s querySelector () metoda i njezina se boja mijenja u crvenu.

     
    stavku 1
     
    stavak 2
     
    div jedan
     
    stavak tri
     
    div dva
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'crvena';
    Interaktivni demo

    Testirajte querySelector () u sljedećem interaktivnom prikazu. Samo utipkajte selektor koji odgovara onima koje možete pronaći unutar plavih okvira (npr. #tri), a zatim kliknite gumb Odaberi. Imajte na umu da ako upišete .blok, samo prvi stupanj bit će odabran.

    2. querySelectorAll ()

    Za razliku od querySelector () koji vraća samo prvu instancu svih odgovarajućih elemenata, querySelectorAll () vraća sve elemente koji odgovaraju navedenom CSS selektoru.

    Odgovarajući elementi vraćaju se kao NodeList objekt koji će biti prazan objekt ako nisu pronađeni odgovarajući elementi.

    Sintaksa
    var eles = document.querySelectorAll (selektor);
    • ELES - NodeList objekt sa svim podudarnim elementima kao vrijednosti svojstava. Objekt nije prazan ako nije pronađen nijedan rezultat.
    • selektor - jedan ili više CSS selektora, kao što je "#FooId", ".FooClassName", ”.Class1.class2", ili ".class1, .class2"
    Primjer koda

    Primjer u nastavku koristi isti HTML kao i prethodni. Međutim, u ovom primjeru svi paragrafi su odabrani s querySelectorAll (), i obojene su plavo.

     
    stavku 1
     
    stavak 2
     
    div jedan
     
    stavak tri
     
    div dva
     
     var paragrafi = document.querySelectorAll ('p'); za (var p odlomaka) p.style.color = 'plava';

    3. addEventListener ()

    Događaji odnosi se na ono što se događa s HTML elementom, kao što je klik, fokusiranje ili učitavanje, na koje možemo reagirati s JavaScriptom. Možemo dodijeliti JS funkcije slušati za te događaje u elementima i učinite nešto kada se događaj dogodio.

    Postoje tri načina na koje možete dodijeliti funkciju određenom događaju.

    Ako foo () je prilagođena funkcija, možete je registrirati kao slušatelj događaja klika (nazovite kada se klikne na element gumba) na tri načina:

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

    Metoda addEventListener () (treća otopina) neke profesionalce; to je najnoviji standard - dopuštajući dodjeljivanje više od jedne funkcije slušateljima događaja na jedan događaj - i dolazi s korisnim skupom opcija.

    Sintaksa
    ele.addEventListener (evt, slušatelj, [opcije]);
    • ele - HTML element koji slušatelj događaja sluša.
    • EVT - Ciljani događaj.
    • slušalac - Tipično, JavaScript funkcija.
    • opcije - (izborno) Objekt s nizom boolean svojstava (naveden u nastavku).
    Opcije Što se događa, kada je postavljeno na pravi?
    uhvatiti

    Zaustavlja mjehuriće događaja, tj. Sprječava pozivanje bilo kojeg slušatelja događaja za isti tip događaja u precima elementa.

    Da biste koristili ovu značajku, možete koristiti 2 sintakse:

    1. ele.addEventListener (evt, slušatelj, istinito)
    2. ele.addEventListener (evt, slušatelj, capture: true);
    jednom

    Slušatelj se naziva samo prvi put kada se događaj dogodi, a zatim se automatski odvaja od događaja i više ga neće aktivirati..
    pasivno

    Zadana radnja događaja ne može se zaustaviti pomoću metode preventDefault ().
    Primjer koda

    U ovom primjeru dodajemo pozivatelja koji je nazvao događaj klika foo, prema 

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

    Dodijeli foo () prilagođena funkcija kao slušatelj događaja na bilo koji od sljedeća tri događaja: ulazni, klik ili Prelazak mišem & pokrenite odabrani događaj u donjem polju za unos lebdeći prstom, klikom ili upisivanjem u njega.

    4. removeEventListener ()

    removeEventListener () način odvaja slušaoca događaja prethodno dodano s oznakom addEventListener () način od događaja za koji sluša.

    Sintaksa
    ele.removeEventListener (evt, slušatelj, [opcije]);

    Koristi istu sintaksu kao i gore spomenuta addEventListener () metoda (osim za jednom opcija koja je isključena). Opcije se koriste da bi bile vrlo specifične u vezi s identificiranjem slušatelja koji će biti odvojen.

    Primjer koda

    Slijedeći primjerak koda koji smo koristili na addEventListener (), ovdje uklanjamo pozvanog slušatelja događaja klika foo od