Pagina principala » Codificare » 15 metode JavaScript pentru manipularea DOM pentru dezvoltatorii web

    15 metode JavaScript pentru manipularea DOM pentru dezvoltatorii web

    În calitate de dezvoltator de web, trebuie să manipulați frecvent DOM, modelul de obiect folosit de browsere specificați structura logică a paginilor web și pe baza acestei structuri redați elementele HTML pe ecran.

    HTML definește implicită structură DOM. Cu toate acestea, în multe cazuri este posibil să doriți să manipulați acest lucru cu JavaScript, de obicei, pentru a adăugați funcționalități suplimentare la un site.

    IMAGE: dezvoltatori Google

    În acest post, veți găsi o listă de 15 metode JavaScript de bază acea ajutați manipularea DOM. Probabil că veți folosi aceste metode în mod frecvent în codul dvs. și, de asemenea, le veți bate în aceste tutoriale JavaScript.

    1. querySelector ()

    querySelector () metodă returnează primul element care se potrivește cu unul sau mai mulți selectori CSS. Dacă nu se găsește niciun rezultat, acesta se întoarce nul.

    Inainte de querySelector () a fost introdus, dezvoltatorii utilizate pe scară largă getElementById () metoda care aduce un element cu un anumit id valoare.

    Cu toate ca getElementById () este încă o metodă utilă, dar cu cea mai recentă querySelector () și querySelectorAll () metode de care suntem liberi țintă bazate pe orice selector CSS, astfel avem mai multă flexibilitate.

    Sintaxă
    var ele = document.querySelector (selector);
    • ELE - Primul element de potrivire sau nul (dacă niciun element nu se potrivește cu selectorii)
    • selector - unul sau mai mulți selectori CSS, cum ar fi "#FooId", ".FooClassName", “.Class1.class2", sau ".class1, .class2"
    Exemplu de cod

    În acest exemplu, primul

    este selectat cu querySelector () și culoarea sa este schimbată în roșu.

     
    alineatul (1)
     
    al doilea paragraf
     
    div prima
     
    alineatul (3)
     
    div două
     
     var primaDiv = document.querySelector ("div"); firstDiv.style.color = 'roșu';
    Demo interactivă

    Testați querySelector () în următoarea demonstrație interactivă. Doar introduceți un selector care se potrivește cu cele pe care le găsiți în cutiile albastre (de ex. #Trei) și faceți clic pe butonul Selectare. Rețineți că dacă tastați .bloc, doar prima sa instanță va fi selectat.

    2. querySelectorAll ()

    Spre deosebire de querySelector () care returnează numai prima instanță a tuturor elementelor de potrivire, querySelectorAll () returnează toate elementele care se potrivesc cu selectorul CSS specificat.

    Elementele de potrivire sunt returnate ca a NodeList obiect care va fi un obiect gol dacă nu se găsesc elemente potrivite.

    Sintaxă
    var eles = document.querySelectorAll (selector);
    • Eles - A NodeList obiect cu toate elementele de potrivire ca valori de proprietate. Obiectul este gol dacă nu se găsesc potriviri.
    • selector - unul sau mai mulți selectori CSS, cum ar fi "#FooId", ".FooClassName", “.Class1.class2", sau ".class1, .class2"
    Exemplu de cod

    Exemplul de mai jos utilizează același cod HTML ca cel precedent. Cu toate acestea, în acest exemplu, toate paragrafele sunt selectate cu querySelectorAll (), și sunt colorate în albastru.

     
    alineatul (1)
     
    al doilea paragraf
     
    div prima
     
    alineatul (3)
     
    div două
     
     var paragrafe = document.querySelectorAll ('p'); pentru (var p de paragrafe) p.style.color = 'albastru';

    3. addEventListener ()

    Evenimente consultați ce se întâmplă cu un element HTML, cum ar fi clicurile, focalizarea sau încărcarea, la care putem reacționa cu JavaScript. Putem desemna funcțiile JS asculta pentru aceste evenimente în elemente și să facă ceva când evenimentul a avut loc.

    Există trei moduri în care poți atribuiți o funcție unui anumit eveniment.

    Dacă foo () este o funcție personalizată, o puteți înregistra ca un ascultător de evenimente clic (apelați-l când se face clic pe elementul de buton) în trei moduri:

    1.  
    2.  var btn = document.querySelector ("butonul"); btn.onclick = foo;
    3.  var btn = document.querySelector ("butonul"); btn.addEventListener ("clic", foo);

    Metoda addEventListener () (a treia soluție) unii profesioniști; este ultimul standard - care permite asignarea mai multor funcții ca ascultători de evenimente unui eveniment - și vine cu un set util de opțiuni.

    Sintaxă
    ele.addEventListener (evt, ascultător, [opțiuni]);
    • ELE - Elementul HTML de ascultător al evenimentului va fi ascultat.
    • EVT - Evenimentul vizat.
    • ascultător - De obicei, o funcție JavaScript.
    • Opțiuni - (opțional) Un obiect cu un set de proprietăți booleene (enumerate mai jos).
    Opțiuni Ce se întâmplă când este setat Adevărat?
    captură

    Opresc blocarea evenimentului, adică împiedică apelarea oricărui ascultător al evenimentului pentru același tip de eveniment din strămoșii elementului.

    Pentru a utiliza această funcție, puteți utiliza 2 sintaxe:

    1. ele.addEventListener (evt, ascultător, adevărat)
    2. ele.addEventListener (evt, ascultător, capture: true);
    o singura data

    Listenerul este numit doar prima dată când evenimentul se întâmplă, atunci acesta este detașat automat de eveniment și nu va mai fi declanșat de acesta.
    pasiv

    Acțiunea prestabilită a evenimentului nu poate fi oprită prin metoda prevenDefault ().
    Exemplu de cod

    În acest exemplu, adăugăm un ascultător al evenimentului de clic numit foo, la 

     var btn = document.querySelector ("butonul"); btn.addEventListener ( 'clic', foo); funcția foo () alert ('hello');
    Demo interactivă

    Atribuiți foo () funcție personalizată ca ascultător de evenimente la oricare dintre următoarele trei evenimente: intrare, clic sau mouse-ul peste & declanșează evenimentul selectat în câmpul de intrare de jos, făcându-și cursorul, făcând clic sau introducând-l.

    4. removeEventListener ()

    removeEventListener () metodă detașează un ascultător al evenimentului adăugată anterior cu addEventListener () metodă de la evenimentul pe care îl ascultă.

    Sintaxă
    ele.removeEventListener (evt, ascultător, [opțiuni]);

    Folosește aceeași sintaxă ca cea menționată mai sus addEventListener () (cu excepția cazului o singura data care este exclusă). Opțiunile sunt utilizate pentru a fi foarte specifice cu privire la identificarea ascultătorului care urmează să fie detașat.

    Exemplu de cod

    Urmând exemplul de cod pe care l-am utilizat la addEventListener (), aici eliminăm ascultătorul evenimentului de clic numit foo de la