15 JavaScript-methoden voor DOM-manipulatie voor webontwikkelaars

var ele = document.querySelector (selector);

wordt geselecteerd met de querySelector () methode en de kleur is veranderd in rood.

 
eerste alinea
 
lid twee
 
div een
 
paragraaf drie
 
div twee
 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rood'; 

Interactieve demo

Test de querySelector () methode in de volgende interactieve demo. Typ gewoon een selector die overeenkomt met degene die u kunt vinden in de blauwe vakken (bijv. #drie) en klik op de knop Selecteren. Merk op dat als u typt .blok, alleen zijn eerste exemplaar zal worden geselecteerd.

2. querySelectorAll ()

anders querySelector () die alleen het eerste exemplaar van alle overeenkomende elementen retourneert, querySelectorAll () retourneert alle elementen die overeenkomen met de opgegeven CSS-selector.

De overeenkomende elementen worden geretourneerd als een nodelist object dat een leeg object zal zijn als er geen overeenkomende elementen worden gevonden.

Syntaxis

var eles = document.querySelectorAll (selector);

• eles - EEN nodelist object met alle overeenkomende elementen als eigenschapswaarden. Het object is leeg als er geen overeenkomsten zijn gevonden.
• keuzeschakelaar - een of meer CSS-kiezers, zoals "#FooId", ".FooClassName", " .Class1.class2", of ".class1, .class2"

Codevoorbeeld

Het onderstaande voorbeeld gebruikt dezelfde HTML als de vorige. In dit voorbeeld zijn alle alinea's geselecteerd met querySelectorAll (), en zijn blauw gekleurd.

 
eerste alinea
 
lid twee
 
div een
 
paragraaf drie
 
div twee
 

 var paragraph = document.querySelectorAll ('p'); for (var p of paragraph) p.style.color = 'blue'; 

3. addEventListener ()

Evenementen verwijzen naar wat er met een HTML-element gebeurt, zoals klikken, scherpstellen of laden, waarop we kunnen reageren met JavaScript. We kunnen JS-functies toewijzen aan luister voor deze gebeurtenissen in elementen en iets doen wanneer de gebeurtenis had plaatsgevonden.

Er zijn drie manieren waarop je kunt wijs een functie toe aan een bepaalde gebeurtenis.

Als foo () is een aangepaste functie, u kunt het registreren als een klikgebeurtenis luisteraar (noem het wanneer op het knopelement wordt geklikt) op drie manieren:

1.  alarm

2.  var btn = document.querySelector ('knop'); btn.onclick = foo;

3.  var btn = document.querySelector ('knop'); btn.addEventListener ('klik', foo);

De methode addEventListener () (de derde oplossing) heeft sommige pro's; het is de nieuwste standaard - de toewijzing van meer dan één functie als gebeurtenislisteners aan één evenement - en wordt geleverd met een handige reeks opties.

Syntaxis

ele.addEventListener (evt, listener, [opties]);

• ele - Het HTML-element waarnaar de gebeurtenislistener luistert.
• evt - De gerichte gebeurtenis.
• luisteraar - Typisch een JavaScript-functie.
• opties - (optioneel) Een object met een set booleaanse eigenschappen (hieronder weergegeven).

opties	Wat gebeurt er, wanneer het is ingesteld op waar?
gevangen nemen	Stopt het borrelen van gebeurtenissen, d.w.z. voorkomt dat alle gebeurtenislisteners worden opgeroepen voor hetzelfde gebeurtenistype in de voorouders van het element. Om deze functie te gebruiken, kunt u 2 syntaxes gebruiken: ele.addEventListener (evt, luisteraar, waar) ele.addEventListener (evt, listener, capture: true);
een keer	Luisteraar wordt alleen de eerste keer dat de gebeurtenis plaatsvindt genoemd, dan wordt deze automatisch verwijderd van de gebeurtenis en wordt deze er niet meer door geactiveerd.
passief	De standaardactie van de gebeurtenis kan niet worden gestopt met de methode preventDefault ().

Codevoorbeeld

In dit voorbeeld voegen we een klikgebeurtenislistener toe foo, naar de HTML-tag.

Klik hier

 var btn = document.querySelector ('knop'); btn.addEventListener ( 'klik', foo); functie foo () alert ('hallo'); 

Interactieve demo

Wijs het toe foo () aangepaste functie als gebeurtenislistener voor een van de volgende drie gebeurtenissen: invoer, Klik of mouseover & activeer de gekozen gebeurtenis in het onderste invoerveld door er in te zoomen, te klikken of te typen.

4. removeEventListener ()

De removeEventListener () methode maakt een gebeurtenislistener los eerder toegevoegd met de addEventListener () methode van het evenement waar het naar luistert.

Syntaxis

ele.removeEventListener (evt, listener, [options]);

Gebruikt dezelfde syntaxis als de hiervoor genoemde addEventListener () methode (behalve voor de een keer optie die is uitgesloten). De opties worden gebruikt om heel specifiek te zijn over het identificeren van de luisteraar om te worden losgemaakt.

Codevoorbeeld

Volgend op het codevoorbeeld dat we gebruikten bij addEventListener (), hier verwijderen we de klikgebeurtenislistener genoemd foo van de element.

 btn.removeEventListener ( 'klik', foo);

5. createElement ()

De createElement () methode maakt een nieuw HTML-element de ... gebruiken naam van de HTML-tag worden gemaakt, zoals 'P' of 'Div'.

U kunt dit element later aan de webpagina toevoegen door er verschillende te gebruiken methoden voor DOM-invoeging, zoals AppendChild () (zie later in dit bericht).

Syntaxis

document.createElement (tagName);

• tagName - De naam van de HTML-tag die u wilt maken.

Codevoorbeeld

Met het volgende voorbeeld kunt u een nieuw alinea-element maken:

var pEle = document.createElement ('p')

6. appendChild ()

De appendChild () methode voegt een element toe als het laatste kind naar het HTML-element dat deze methode oproept.

Het in te voegen kind kan een van beide zijn nieuw gecreëerde element, of een al bestaande. In het laatste geval wordt het van de vorige positie naar de positie van het laatste kind verplaatst.

Syntaxis

ele.appendChild (childEle)

• ele - Het HTML-element waarnaar childEle is toegevoegd als zijn laatste kind.
• childEle - Het HTML-element toegevoegd als laatste kind van ele.

Codevoorbeeld

In dit voorbeeld voegen we een element is als het kind van een

element met behulp van de appendChild () en de hiervoor genoemde createElement () methoden.

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

Interactieve demo

In de volgende interactieve demo, brieven van #een naar #R zijn de onderliggende elementen van de # Ouder-one, # Ouder-two, en # Ouder-drie id selectors.

Bekijk hoe het appendChild () methode werkt door typ een naam voor de ouder en een kind in de onderstaande invoervelden. U kunt ook kinderen kiezen die behoren tot een andere ouder.

7. removeChild ()

De removeChild () methode verwijdert een opgegeven onderliggende element van het HTML-element dat deze methode aanroept.

Syntaxis

ele.removeChild (childEle)

• ele - Het bovenliggende element van childEle.
• childEle - Het onderliggende element van ele.

Codevoorbeeld

In dit voorbeeld verwijderen we de element dat we als kind hebben toegevoegd aan de

tag bij het codevoorbeeld voor het vorige appendChild () methode.

div.removeChild (sterk);

8. replaceChild ()

De replaceChild () methode vervangt een kindelement door een ander element behorend bij het bovenliggende element dat deze methode aanroept.

Syntaxis

ele.replaceChild (newChildEle, oldChileEle)

• ele - Bovenliggend element waarvan kinderen moeten worden vervangen.
• newChildEle - Kind element van ele die zal vervangen oldChildEle.
• oldChildEle - Kind element van ele, dat zal worden vervangen door newChildEle.

Codevoorbeeld

In dit voorbeeld het onderliggende element behorend tot de

bovenliggend element wordt vervangen door een nieuw aangemaakt label.

 
 Hallo 

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

9. cloneNode ()

Wanneer u een nieuw element moet maken dat de. Moet zijn hetzelfde als een reeds bestaand element op de webpagina kunt u eenvoudigweg maak een kopie van het reeds bestaande element de ... gebruiken cloneNode () methode.

Syntaxis

var dupeEle = ele.cloneNode ([deep])

• dupeEle - Kopie van de ele element.
• ele - Het HTML-element dat moet worden gekopieerd.
• diep - (optioneel) Een booleaanse waarde. Als het is ingesteld op waar, dupeEle zal alle elementen van het kind hebben ele heeft, als het is ingesteld op vals het zal worden gekloond zonder zijn kinderen.

Codevoorbeeld

In dit voorbeeld maken we een kopie voor de element met cloneNode (), dan voegen we het toe aan de

label als een onderliggende element met de eerder genoemde appendChild () methode.

Als gevolg,

zal er twee bevatten elementen, beide met de Hallo string als inhoud.

 
 Hallo 

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

10. insertBefore ()

De insertBefore () methode voegt een opgegeven onderliggende element toe vóór een ander onderliggende element. De methode wordt aangeroepen door het bovenliggende element.

Als het onderliggende onderliggende element niet bestaat of als u expliciet bent geslaagd nul op zijn plaats wordt het onderliggende element toegevoegd dat moet worden ingevoegd als het laatste kind van de ouder (gelijkwaardig aan appendChild ()).

Syntaxis

ele.insertBefore (newEle, refEle);

• ele - Bovenliggend element.
• newEle - Nieuw HTML-element dat moet worden ingevoegd.
• refEle - Een kind element van ele Waarvoor newEle zal worden ingevoegd.

Codevoorbeeld

In dit voorbeeld maken we een nieuwe element met wat tekst erin, en voeg het toe voor de element binnen de

ouder element.

 
 Hallo 

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

Interactieve demo

Deze interactieve demo werkt op dezelfde manier als onze vorige demo van de appendChild () methode. Hier hoeft u alleen de id-selectors van twee onderliggende elementen (uit #een naar #R) in de invoervakken en u kunt zien hoe het insertBefore () methode verplaatst het eerste opgegeven kind voor de seconde.

11. createDocumentFragment ()

De createDocumentFragment () methode is misschien niet zo bekend als de andere in deze lijst, toch is het een belangrijke, vooral als je dat wilt voeg meerdere elementen in bulk in, zoals het toevoegen van meerdere rijen aan een tabel.

Het creëert een DocumentFragment voorwerp, wat in wezen is een DOM-knooppunt dat geen deel uitmaakt van de DOM-structuur. Het is als een buffer waar we eerst andere elementen (bijvoorbeeld meerdere rijen) kunnen toevoegen en opslaan, voordat ze worden toegevoegd aan het gewenste knooppunt in de DOM-structuur (bijvoorbeeld een tabel).

Waarom voegen we niet alleen elementen rechtstreeks toe aan de DOM-structuur? Omdat DOM-invoeging veroorzaakt indelingswijzigingen, en het is een duur browserproces aangezien meerdere consequente elementinserties meer lay-outwijzigingen zullen veroorzaken.

Aan de andere kant, elementen toevoegen aan een DocumentFragment voorwerp veroorzaakt geen lay-outwijzigingen, U kunt dus zoveel elementen toevoegen als u wilt voordat u ze doorgeeft aan de DOM-structuur, waardoor op dit moment alleen een opmaakverandering optreedt.

Syntaxis

document.createDocumentFragment ()

Codevoorbeeld

In dit voorbeeld maken we meerdere tabelrijen en cellen met de createElement () methode, voeg ze toe aan a DocumentFragment object, voeg dat documentfragment uiteindelijk toe aan een HTML

de ... gebruiken appendChild () methode.

Als gevolg hiervan worden vijf rijen - elk met één cel met een getal van 1 tot 5 als inhoud - in de tabel ingevoegd.

 var table = document.querySelector ("table"); var df = document.createDocumentFragment (); voor (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 ()

Soms wil je dat controleer de CSS-eigenschapswaarden van een element voordat u wijzigingen aanbrengt. U kunt de ele.style eigenschap om hetzelfde te doen, echter de getComputedStyle () methode is speciaal hiervoor gemaakt geeft de alleen-lezen berekende waarden van alle CSS-eigenschappen van een opgegeven HTML-element.

Syntaxis

var style = getComputedStyle (ele, [pseudoEle])

• stijl - EEN CSSStyleDeclaration object geretourneerd door de methode. Het bevat alle CSS-eigenschappen en hun waarden van de ele element.
• ele - Het HTML-element waarvan CSS-eigenschapswaarden worden opgehaald.
• pseudoEle - (optioneel) Een reeks die een pseudo-element vertegenwoordigt (bijvoorbeeld, ':na'). Als dit wordt vermeld, zijn de CSS-eigenschappen van het opgegeven pseudo-element gekoppeld aan ele zal worden teruggegeven.

Codevoorbeeld

In dit voorbeeld ontvangen en waarschuwen we de berekende gegevens breedte waarde van a

element met behulp van de getComputedStyle () methode.

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

13. setAttribute ()

De setAttribute () methode ook voegt een nieuw attribuut toe naar een HTML-element, of werkt de waarde bij van een kenmerk dat al bestaat.

Syntaxis

ele.setAttribute (naam, waarde);

• ele - Het HTML-element waaraan een attribuut is toegevoegd of van welk attribuut is bijgewerkt.
• naam - De naam van het attribuut.
• waarde - De waarde van het attribuut.

Codevoorbeeld

In dit voorbeeld voegen we de contenteditable attribuut aan a

door gebruik te maken van de setAttribute () methode, die de inhoud bewerkbaar zal maken.

Hallo

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

14. getAttribute ()

De getAttribute () methode retourneert de waarde van een opgegeven kenmerk behorende tot een bepaald HTML-element.

Syntaxis

ele.getAttribute (name);

• ele - Het HTML-element van welk attribuut wordt aangevraagd.
• naam - De naam van het attribuut.

Codevoorbeeld

In dit voorbeeld waarschuwen we de waarde van de contenteditable attribuut behorende bij de

element met behulp van de getAttribute () methode.

Hallo

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

15. removeAttribute ()

De removeAttribute () methode verwijdert een bepaald kenmerk van een specifiek HTML-element.

Syntaxis

ele.removeAttribute (name);

• ele - Het HTML-element waarvan het attribuut moet worden verwijderd.
• naam - De naam van het attribuut.

Codevoorbeeld

In dit voorbeeld verwijderen we de contenteditable attribuut van de

element. Dientengevolge, de

kan niet meer worden bewerkt.

Hallo

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

15 Lessen The Art of War leert je over het winnen van levensgevechten

15 Lightbox-bibliotheken voor mobiel reactievermogen

15 Ideeën om te kopen of uw perfecte staande bureau te bouwen

Volgend artikel

15 jQuery-plug-ins om slimme, sticky elementen te maken

Vorig artikel

15 Inspirerende Opstart-presentatievideo's voor ondernemers