15 JavaScript-metoder for DOM-manipulering for webutviklere

første ledd
annet ledd
 div en 
tredje ledd
 div to 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rød'; 

Interaktiv demo

Test querySelector() -metoden i følgende interaktive demo. Bare skriv inn en velger som matcher de du finner i de blå boksene (f.eks. #three ), og klikk på Velg-knappen. Merk at hvis du skriver inn .block, blir bare første instans valgt.

querySelectorAll()

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

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

syntax

 var eles = document.querySelectorAll (selector); 

• eles - Et NodeList objekt med alle matchende elementer som eiendomsverdier. Objektet er tomt hvis ingen treff er funnet.
• selector - 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
annet ledd
 div en 
tredje ledd
 div to 

 var avsnitt = document.querySelectorAll ('p'); for (var p av avsnitt) p.style.color = 'blue'; 

3. addEventListener()

Hendelser refererer til hva som skjer med et HTML-element, for eksempel klikke, fokusering eller lasting, som vi kan reagere med JavaScript. Vi kan tilordne JS-funksjoner til å lytte etter disse hendelsene i elementer og gjøre 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, kan du registrere den som en klikkhendelselytter (ring den når knappelementet klikkes) på tre måter:

1.  Varsling 

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 - som 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.
• listener - Vanligvis en JavaScript-funksjon.
• options - (valgfritt) Et objekt med et sett med boolske egenskaper (oppført nedenfor).

Kodeeksempel

I dette eksemplet legger vi til en klikkhendelselytter som heter foo, til HTML-taggen.

 Klikk på meg 

 var btn = document.querySelector ('button'); btn.addEventListener ( 'klikk', foo); funksjon foo () {alarm ('hallo'); } 

Interaktiv demo

Tilordne foo() tilpasset funksjon som en hendelseslytter til noen av de tre følgende hendelsene: input, click eller mouseover og utløs den valgte hendelsen i det nederste inntastingsfeltet ved å svinge, klikke eller skrive inn det.

4. removeEventListener()

removeEventListener() fjerner en hendelseslytter som tidligere ble lagt til med metoden addEventListener() fra hendelsen den lytter etter .

syntax

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

Bruker samme syntaks som den nevnte addEventListener() -metoden (unntatt det once gangsalternativet som er utelatt). Alternativene er vant til å være veldig spesifikt om å identifisere lytteren for å være løsrevet.

Kodeeksempel

Etter kodeeksemplet vi brukte på addEventListener(), fjerner vi klikkhendelselytteren som heter foo fra elementet.

 btn.removeEventListener ( 'klikk', foo); 

5. createElement()

createElement() lager et nytt HTML-element ved hjelp av navnet på HTML-koden som skal opprettes, for eksempel 'p' eller 'div' .

Du kan senere legge til dette elementet på nettsiden ved hjelp av forskjellige metoder for DOM-innføring, for eksempel AppendChild() (se senere i dette innlegget).

syntax

 document.createElement (TagNavn); 

• tagName - Navnet på HTML-taggen du vil opprette.

Kodeeksempel

Med følgende eksempel kan du opprette et nytt avsnitt:

 var pEle = document.createElement ('p') 

6. appendChild()

Metoden appendChild() legger til et element som det siste barnet til HTML-elementet som påkaller denne metoden.

Barnet som skal settes inn, kan enten være et nyopprettet element eller en allerede eksisterende . I sistnevnte tilfelle vil det bli flyttet fra sin tidligere posisjon til stillingen til det siste barnet.

syntax

 ele.appendChild (childEle) 

• ele - HTML-elementet som childEle legges til som sitt siste barn.
• childEle - HTML-elementet lagt til som ele siste barn.

Kodeeksempel

I dette eksemplet legger vi inn et element som barn av a

element ved hjelp av appendChild() og de nevnte createElement() metodene.

 var div = document.querySelector ('div'); var strong = document.createElement ('strong'); strong.textContent = 'Hei'; div.appendChild (sterk); 

Interaktiv demo

I følgende interaktive demo er bokstaver fra #a til #r i #parent-one, #parent-two og #parent-three id-valgere.

Sjekk ut hvordan metoden for appendChild() fungerer ved å skrive en foreldre og ett barnselgernavn i inntastingsfeltene nedenfor. Du kan også velge barn som tilhører en annen forelder.

7. removeChild()

removeChild() fjerner et spesifisert barnelement fra HTML-elementet som kaller denne metoden.

syntax

 ele.removeChild (childEle) 

• ele - Foreldreelementet i childEle .
• childEle - Barnets element i ele .

Kodeeksempel

I dette eksemplet fjerner vi elementet vi la til som barn til

tag på appendChild() for den forrige appendChild() -metoden.

 div.removeChild (sterk); 

8. replaceChild()

replaceChild() erstatter et replaceChild() med en annen som tilhører overordnet elementet som kaller denne metoden.

syntax

 ele.replaceChild (newChildEle, oldChileEle) 

• ele - Foreldreelement hvorav barn skal byttes ut.
• newChildEle - newChildEle av ele som erstatter oldChildEle .
• oldChildEle - Child element av ele, som vil bli erstattet av newChildEle .

Kodeeksempel

I dette eksemplet tilhører barnelementet til

foreldreelementet er erstattet med en nyopprettet kode.

 Hallo 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hei'; div.replaceChild (em, strong); 

9. cloneNode()

Når du må opprette et nytt element som må være det samme som et allerede eksisterende element på nettsiden, kan du bare lage en kopi av det eksisterende elementet ved hjelp av cloneNode() .

syntax

var dupeEle = ele.cloneNode([deep])

• dupeEle - Kopi av ele elementet.
• ele - HTML-elementet som skal kopieres.
• deep - (valgfritt) En boolsk verdi. Hvis det er satt til true, vil dupeEle ha alle dupeEle ele har, hvis den er satt til false, blir den klonet uten sine barn.

Kodeeksempel

I dette eksemplet lager vi en kopi for elementet med cloneNode(), så legger vi det til

tag som et barnelement med den ovennevnte appendChild() -metoden.

Som et resultat,

vil inneholde to elementer, begge med hello streng som innhold.

 Hallo 

 var strong = document.querySelector ('strong'); var kopi = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (kopi); 

10. insertBefore()

insertBefore() legger til et spesifisert insertBefore() før et annet insertBefore() . Metoden kalles av overordnet element.

Hvis det refererte barnelementet ikke eksisterer eller du sender eksplisitt null på plass, blir barnelementet som skal settes inn lagt til som foreldrenes siste barn (lik appendChild() ).

syntax

 ele.insertFor (newEle, refEle); 

• ele - Parent element.
• newEle - Nytt HTML element som skal settes inn.
• refEle - Et refEle av ele før hvilket nytt newEle vil bli satt inn.

Kodeeksempel

I dette eksempelet oppretter vi et nytt element med litt tekst på innsiden, og legger til det før elementet inne i

foreldreelement.

 Hallo 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hei'; div.insertBefore (em, sterk); 

Interaktiv demo

Denne interaktive demoen fungerer på samme måte som vår tidligere demo som tilhører appendChild() -metoden. Her må du bare skrive id-valgene til to barns elementer (fra #a til #r ) i inntastingsboksene, og du kan se hvordan metoden insertBefore() beveger det første spesifiserte barnet før det andre.

11. createDocumentFragment()

createDocumentFragment() kan ikke være like kjent som de andre i denne listen, men det er likevel viktig, spesielt hvis du vil sette inn flere elementer i bulk, for eksempel å legge til flere rader i et bord.

Det oppretter et DocumentFragment objekt, som i hovedsak er en DOM-node som ikke er en del av DOM-treet . Det er som en buffer der vi kan legge til og lagre andre elementer (f.eks. Flere rader) først, før du legger dem til ønsket nod i DOM-treet (f.eks. Til et bord).

Hvorfor legger vi ikke bare til elementer direkte til DOM-treet? Fordi DOM-innføring forårsaker layoutendringer, og det er en kostbar nettleserprosess, da flere konsekvensinnsatser vil føre til flere layoutendringer.

På den annen side, legger du til elementer i et DocumentFragment objekt ikke noen endringer i layoutet, slik at du kan legge til så mange elementer til det som du vil, før du overfører dem til DOM-treet, noe som bare forårsaker en layoutendring på dette punktet.

syntax

 document.createDocumentFragment () 

Kodeeksempel

I dette eksempelet oppretter vi flere tabellrader og -celler med createElement() -metoden, og legger dem til et DocumentFragment objekt, legger endelig til dokumentfragmentet i en HTML

ved hjelp av appendChild() -metoden.

Som et resultat vil fem rader - hver av dem som inneholder en celle med et tall fra 1 til 5 som innhold - bli satt inn i bordet.

 var tabell = document.querySelector ("table"); var df = document.createDocumentFragment (); for (var i = 0; i <5; i ++) {var td = document.createElement ("td"); var tr = document.createElement ("tr"); td.textContent = i; tr.appendChild (td) df.appendChild (tr); } table.appendChild (df); 

12. getComputedStyle()

Noen ganger vil du sjekke CSS-egenskapsverdiene til et element før du foretar endringer. Du kan bruke egenskapen ele.style til å gjøre det samme, men metoden getComputedStyle() har bare blitt gjort for dette formålet, og returnerer bare skriveberegnede verdier av alle CSS-egenskapene til et spesifikt HTML-element.

syntax

 var style = getComputedStyle (ele, [pseudoEle]) 

• style - Et CSSStyleDeclaration objekt returnert av metoden. Den inneholder alle CSS egenskaper og deres verdier av ele elementet.
• ele - HTML-elementet som CSS-eiendomsverdier hentes fra.
• pseudoEle - (valgfritt) En streng som representerer et pseudo-element (for eksempel, ':after' ). Hvis dette er nevnt, vil CSS-egenskapene til det angitte pseudoelementet tilknyttet ele bli returnert.

Kodeeksempel

I dette eksempelet får vi og varsle verdien for beregnet width av a

element ved hjelp av getComputedStyle() .

 var style = getComputedStyle (document.querySelector ('div')); alert (style.width); 

13. setAttribute()

setAttribute() legger enten til et nytt attributt til et HTML-element, eller oppdaterer verdien av et attributt som allerede eksisterer.

syntax

 ele.setAttribute (navn, verdi); 

• ele - HTML-elementet som et attributt er lagt til, eller som attributet er oppdatert.
• name - navnet på attributtet
• value - verdien av attributtet.

Kodeeksempel

I dette eksemplet legger vi til attributten contenteditable til en

ved å bruke setAttribute() -metoden, som vil gjøre innholdet redigerbart.

 Hallo 

 var div = document.querySelector ('div'); div.setAttribute ('contenteditable', '') 

14. getAttribute()

getAttribute() returnerer verdien av et spesifisert attributt som tilhører et bestemt HTML-element.

syntax

 ele.getAttribute (navn); 

• ele - HTML-elementet som tilhører attributtet.
• name - navnet på attributtet

Kodeeksempel

I dette eksemplet varsler vi verdien av contenteditable attributtet som tilhører

elementet ved hjelp av metoden getAttribute() .

 Hallo 

 var div = document.querySelector ('div'); alert (div.getAttribute ( 'contenteditable')) 

15. removeAttribute()

removeAttribute() fjerner et gitt attributt for et bestemt HTML-element.

syntax

ele.removeAttribute(name);

• ele - HTML-elementet som tilhører attributtet skal fjernes.
• name - navnet på attributtet

Kodeeksempel

I dette eksemplet fjerner vi contenteditable fra

element. Som et resultat,

vil ikke bli redigerbar lenger.

 Hallo 

 var div = document.querySelector ('div'); div.removeAttribute ( 'contenteditable'); 

Denne Cheatsheet lister hvert tag du kan sette inn Element

Hver nettside har et dokumentoverskrift, og det er mye som går inn der. WordPress-brukere stoler ofte på SEO-plugins for å håndtere komplekse metakoder .Men hvis du koder et tema fra bunnen av, kan du kanskje utvide dokumentoverskriften litt . Det er bokstavelig talt hundrevis av koder du kan bruke hver med sin egen subtile hensikt, og Get Head Info er det eneste cheatsheetet du trenger på dette emnet.Det

(Tekniske og design tips)

CSS Post-prosessorer for nybegynnere: Tips og ressurser

CSS forbehandling er et konsept som de fleste webutviklere allerede har lært eller lest om. Vi har dekket CSS preprocessing i full detalj for å hjelpe utviklere til å få fart på denne utbredte teknologien. Men hva med postprosessorer ?Disse relativt nye verktøyene er like i den forstand at de påvirker webutviklings arbeidsflyten, men de opererer på den andre siden av CSS utvikling ("post" -utvikling).I dette

(Tekniske og design tips)



Interessante Artikler

Showcase av webdesign med vakker typografi

En veiledning for rengjøring av den infiserte PCen (og forebygging av fremtidige infeksjoner)

Freebie Release: "Cutie" Webkvalitet med høy kvalitet

Du kan lage video direkte på Facebook - et program som kommer snart