Hjemmeside » Coding » 15 JavaScript-metoder for DOM-manipulering for webutviklere

    15 JavaScript-metoder for DOM-manipulering for webutviklere

    Som webutvikler må du ofte manipulere DOM, objektmodellen som brukes av nettlesere til spesifiser den logiske strukturen av nettsider, og basert på denne strukturen til gjengi HTML-elementer på skjermen.

    HTML definerer standard DOM-struktur. Men i mange tilfeller vil du kanskje manipulere dette med JavaScript, vanligvis for å legg til ekstra funksjonalitet til et nettsted.

    BILDE: Google utviklere

    I dette innlegget finner du en liste over 15 grunnleggende JavaScript-metoder at hjelp DOM manipulasjon. Du vil sannsynligvis bruke disse metodene ofte i koden din, og du vil også støte på dem i våre JavaScript-opplæringsprogrammer.

    1. querySelector ()

    De querySelector () metode returnerer det første elementet som matcher en eller flere CSS-valgere. Hvis ingen match er funnet, kommer den tilbake null.

    Før querySelector () ble introdusert, utviklere brukte mye getElementById () metode som henter et element med en spesifisert id verdi.

    Selv om getElementById () er fortsatt en nyttig metode, men med nyere querySelector () og querySelectorAll () metoder vi er fri til målelementer basert på hvilken som helst CSS-väljare, dermed har vi mer fleksibilitet.

    syntax
    var ele = document.querySelector (selector);
    • ele - Første matchende element eller null (hvis ingen element passer til selektoren)
    • velger - en eller flere CSS-selektorer, for eksempel "#FooId", ".FooClassName", " .Class1.class2", eller ".class1, .class2"
    Kodeeksempel

    I dette eksemplet er den første

    blir valgt med querySelector () metode og fargen er endret til rødt.

     
    første ledd
     
    avsnitt to
     
    div en
     
    tredje ledd
     
    div to
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rød';
    Interaktiv demo

    Test querySelector () metode i følgende interaktive demo. Skriv bare en velg som passer til de du finner i de blå boksene (f.eks. #tre), og klikk på Velg-knappen. Merk at hvis du skriver inn .blokkere, bare sin første instans vil bli valgt.

    2. querySelectorAll ()

    I motsetning til querySelector () som returnerer bare første forekomst av alle matchende elementer, querySelectorAll () returnerer alle elementene som samsvarer med den angitte CSS-väljeren.

    De matchende elementene returneres som en NodeList objekt som vil være en tom gjenstand hvis det ikke finnes noen matchende elementer.

    syntax
    var eles = document.querySelectorAll (selector);
    • eles - EN NodeList objekt med alle matchende elementer som eiendomsverdier. Objektet er tomt hvis ingen treff er funnet.
    • velger - en eller flere CSS-selektorer, for eksempel "#FooId", ".FooClassName", " .Class1.class2", eller ".class1, .class2"
    Kodeeksempel

    Eksempelet nedenfor bruker samme HTML som den forrige. Men i dette eksemplet velges alle avsnitt med querySelectorAll (), og er farget blå.

     
    første ledd
     
    avsnitt to
     
    div en
     
    tredje ledd
     
    div to
     
     var avsnitt = document.querySelectorAll ('p'); for (var p av avsnitt) p.style.color = 'blue';

    3. addEventListener ()

    arrangementer se hva som skjer med et HTML-element, for eksempel å klikke, fokusere eller laste, som vi kan reagere med JavaScript. Vi kan tilordne JS-funksjoner til lytte for disse hendelsene i elementene og gjør noe når hendelsen hadde oppstått.

    Det er tre måter du kan tilordne en funksjon til en bestemt hendelse.

    Hvis foo () er en egendefinert funksjon, du kan registrere den som en klikkhendelse lytter (ring det når knappelementet klikkes) på tre måter:

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

    Metoden addEventListener () (den tredje løsningen) har noen fordeler; det er den nyeste standarden - tillater overføring av mer enn én funksjon som hendelselyttere til en hendelse - og leveres med et nyttig sett med alternativer.

    syntax
    ele.addEventListener (evt, lytter, [alternativer]);
    • ele - HTML-elementet som hendelseslytteren skal lytte til.
    • evt - Den målrettede hendelsen.
    • lytteren - Vanligvis en JavaScript-funksjon.
    • opsjoner - (valgfritt) Et objekt med et sett med boolske egenskaper (oppført nedenfor).
    alternativer Hva skjer når det er satt til ekte?
    fangst

    Stopper hendelsen som bobler, dvs. forhindrer at noen hendelselyttere kalles for samme hendelsestype i elementets forfedre.

    For å bruke denne funksjonen kan du bruke 2 syntakser:

    1. ele.addEventListener (evt, lytter, sann)
    2. ele.addEventListener (evt, lytter, capture: true);
    en gang

    Listener kalles bare første gang hendelsen skjer, da blir det automatisk løsrevet fra arrangementet, og vil ikke bli utløst av det lenger.
    passiv

    Standardhandling av hendelsen kan ikke stoppes med metoden preventDefault ().
    Kodeeksempel

    I dette eksemplet legger vi til en klikkhendelselytter som heter foo, til 

     var btn = document.querySelector ('button'); btn.addEventListener ( 'klikk', foo); funksjon foo () alert ('hei');
    Interaktiv demo

    Tilordne foo () egendefinert funksjon som en hendelseslytter til noen av de tre følgende hendelsene: inngang, klikk eller mus over & utløs den valgte hendelsen i det nederste inntastingsfeltet ved å sveve, klikke eller skrive inn det.

    4. removeEventListener ()

    De removeEventListener () metode løsner en hendelseslytter tidligere lagt til med addEventListener () metode fra arrangementet den lytter etter.

    syntax
    ele.removeEventListener (evt, lytter, [alternativer]);

    Bruker samme syntaks som nevnt ovenfor addEventListener () metode (bortsett fra en gang alternativ som er utelukket). Alternativene er vant til å være veldig spesifikt om å identifisere lytteren for å være løsrevet.

    Kodeeksempel

    Følgende kodeeksempel vi brukte på addEventListener (), her fjerner vi klikkhendelselytteren som heter foo fra