Hjemmeside » Coding » 15 JavaScript-metoder til DOM-manipulation for webudviklere

    15 JavaScript-metoder til DOM-manipulation for webudviklere

    Som webudvikler skal du ofte manipulere DOM, objektmodellen, der bruges af browsere til Angiv den logiske struktur af websider, og baseret på denne struktur til lav HTML-elementer på skærmen.

    HTML definerer standard DOM struktur. Men i mange tilfælde kan du manipulere dette med JavaScript, normalt for at tilføj ekstra funktionaliteter til et websted.

    IMAGE: Google-udviklere

    I dette indlæg finder du en liste over 15 grundlæggende JavaScript-metoder at hjælp DOM manipulation. Du vil sandsynligvis bruge disse metoder ofte i din kode, og du vil også støde på dem i vores JavaScript-tutorials.

    1. querySelector ()

    Det querySelector () metode returnerer det første element, der matcher en eller flere CSS-selektorer. Hvis ingen match er fundet, vender den tilbage nul.

    Før querySelector () blev introduceret, udviklere udbredt meget getElementById () metode som henter et element med en specificeret id værdi.

    Selvom getElementById () er stadig en nyttig metode, men med de nyere querySelector () og querySelectorAll () metoder vi er fri til målelementer baseret på en hvilken som helst CSS-vælger, således har vi større fleksibilitet.

    Syntaks
    var ele = document.querySelector (selector);
    • ele - Første matchende element eller nul (hvis der ikke er noget element, der passer til selektoren)
    • vælgeren - en eller flere CSS-selektorer, såsom "#FooId", ".FooClassName", " .Class1.class2", eller ".class1, .class2"
    Kodeeksempel

    I dette eksempel er den første

    bliver valgt med querySelector () metode og dens farve ændres til rød.

     
    stk
     
    stk
     
    div en
     
    stk
     
    div to
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rød';
    Interaktiv demo

    Test testen querySelector () metode i følgende interaktive demo. Skriv blot en vælger, der matcher dem, du kan finde inden for de blå bokse (f.eks. #tre), og klik på knappen Vælg. Bemærk, at hvis du skriver .blok, kun sin første instans vil blive valgt.

    2. querySelectorAll ()

    I modsætning til querySelector () som kun returnerer første forekomst af alle matchende elementer, querySelectorAll () returnerer alle elementer, der matcher den angivne CSS-vælger.

    De matchende elementer returneres som en NodeList objekt, der vil være en tom objekt, hvis der ikke findes matchende elementer.

    Syntaks
    var eles = document.querySelectorAll (selector);
    • eles - EN NodeList objekt med alle matchende elementer som ejendomsværdier. Objektet er tomt, hvis der ikke findes nogen matchninger.
    • vælgeren - en eller flere CSS-selektorer, såsom "#FooId", ".FooClassName", " .Class1.class2", eller ".class1, .class2"
    Kodeeksempel

    Eksemplet nedenfor bruger samme HTML som den forrige. I dette eksempel vælges alle afsnit med querySelectorAll (), og er farvede blå.

     
    stk
     
    stk
     
    div en
     
    stk
     
    div to
     
     var afsnit = document.querySelectorAll ('p'); for (var p af afsnit) p.style.color = 'blue';

    3. addEventListener ()

    Begivenheder henviser til, hvad der sker med et HTML-element, såsom klik, fokusering eller indlæsning, som vi kan reagere med JavaScript. Vi kan tildele JS funktioner til Lyt til disse begivenheder i elementer og gøre noget, når begivenheden var opstået.

    Der er tre måder, du kan tildele en funktion til en bestemt begivenhed.

    Hvis foo () er en brugerdefineret funktion, du kan registrere det som en klikhændelseslytter (kald det når knapelementet klikkes) på tre måder:

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

    Metoden addEventListener () (den tredje løsning) har nogle fordele; det er den nyeste standard - tillader overdragelse af mere end en funktion som hændelseslyttere til en begivenhed - og leveres med et nyttigt sæt muligheder.

    Syntaks
    ele.addEventListener (evt, lytter, [muligheder]);
    • ele - HTML-elementet, som begivenhedslytteren lytter til.
    • EVT - Den målrettede begivenhed.
    • lytter - Typisk en JavaScript-funktion.
    • muligheder - (valgfrit) Et objekt med et sæt boolske egenskaber (angivet nedenfor).
    Muligheder Hvad sker der, når den er indstillet til rigtigt?
    fange

    Stopper begivenhed bobler, dvs. forhindrer indkaldelse af nogen hændelseslyttere for den samme hændelsestype i elementets forfædre.

    For at bruge denne funktion kan du bruge 2 syntakser:

    1. ele.addEventListener (evt, lytter, sandt)
    2. ele.addEventListener (evt, lytter, capture: true);
    enkelt gang

    Lytteren hedder kun første gang begivenheden sker, så afmonteres den automatisk fra begivenheden og vil ikke blive udløst af den længere.
    passiv

    Standard handling af begivenheden kan ikke stoppes med metoden preventDefault ().
    Kodeeksempel

    I dette eksempel tilføjer vi en klikhændelseslytter, der hedder foo, til 

     var btn = document.querySelector ('knap'); btn.addEventListener ( 'klik', foo); funktion foo () alert ('hej');
    Interaktiv demo

    Tildel foo () brugerdefineret funktion som hændelseslytter til en af ​​de tre følgende begivenheder: input, klik eller mus over & Træk den valgte hændelse i det nederste indtastningsfelt ved at svinge, klikke eller indtaste det.

    4. removeEventListener ()

    Det removeEventListener () metode frigør en hændelseslytter tidligere tilføjet med addEventListener () metode fra den begivenhed den lytter til.

    Syntaks
    ele.removeEventListener (evt, lytter, [muligheder]);

    Bruger den samme syntaks som den førnævnte addEventListener () metode (undtagen for enkelt gang mulighed der er udelukket). Indstillingerne er vant til at være meget specifikke om at identificere lytteren for at være løsrevet.

    Kodeeksempel

    Følgende Code Eksempel vi brugte på addEventListener (), her fjerner vi klikhændelseslytteren, der hedder foo fra