15 JavaScript-methoden voor DOM-manipulatie voor webontwikkelaars

eerste alinea
lid twee
 div een 
paragraaf drie
 div twee 

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

Interactieve demo

Test de methode querySelector() in de volgende interactieve demo. Typ gewoon een selector die overeenkomt met degene die u kunt vinden in de blauwe vakken (bijv. #three ) en klik op de knop Selecteren. Houd er rekening mee dat als u .block, alleen het eerste exemplaar wordt geselecteerd.

2. querySelectorAll()

In tegenstelling tot querySelector() die alleen het eerste exemplaar van alle overeenkomende elementen querySelectorAll() retourneert querySelectorAll() 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.
• selector - een of meer CSS-selectors, 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 ze 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()

Gebeurtenissen 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 om naar deze gebeurtenissen in elementen te luisteren en iets te doen wanneer de gebeurtenis is opgetreden.

Er zijn drie manieren om een ​​functie aan een bepaalde gebeurtenis toe te wijzen.

Als foo() een aangepaste functie is, kunt u het als een klikgebeurtenislistener registreren (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 enkele voordelen ; het is de nieuwste standaard - de toewijzing van meer dan één functie als gebeurtenisluisteraars aan één evenement - en wordt geleverd met een handige reeks opties.

Syntaxis

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

• ele - Het HTML-element ele de gebeurtenislistener zal luisteren.
• evt - Het gerichte evenement.
• listener - Typisch een JavaScript-functie.
• options - (optioneel) Een object met een set booleaanse eigenschappen (hieronder weergegeven).

Codevoorbeeld

In dit voorbeeld voegen we een klikgebeurtenislistener foo aan de HTML-tag.

 Klik hier 

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

Interactieve demo

Wijs de aangepaste functie foo() als een gebeurtenislistener voor een van de volgende drie gebeurtenissen: input, click of mouseover & activeer de gekozen gebeurtenis in het onderste invoerveld door zweven, klikken of typen.

4. removeEventListener()

De methode removeEventListener() een gebeurtenislistener los die eerder is toegevoegd met de addEventListener() van de gebeurtenis waarnaar wordt geluisterd .

Syntaxis

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

Gebruikt dezelfde syntaxis als de eerder genoemde addEventListener() (behalve de once uitgesloten optie). De opties worden gebruikt om heel specifiek te zijn over het identificeren van de luisteraar om te worden losgemaakt.

Codevoorbeeld

Naar aanleiding van het codevoorbeeld dat we gebruikten op addEventListener(), hier verwijderen we de klikgebeurtenislistener foo van het element.

 btn.removeEventListener ( 'klik', foo); 

5. createElement()

De methode createElement() maakt een nieuw HTML-element met de naam van de HTML-tag die moet worden gemaakt, zoals 'p' of 'div' .

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

Syntaxis

 document.createElement (tagName); 

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

Codevoorbeeld

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

 var pEle = document.createElement ('p') 

6. appendChild()

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

Het in te voegen kind kan een nieuw gemaakt element zijn of een al bestaand element, of een al bestaand element . In het laatste geval wordt het verplaatst van de vorige positie naar de positie van het laatste kind.

Syntaxis

 ele.appendChild (childEle) 

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

Codevoorbeeld

In dit voorbeeld voegen we een element in 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 zijn letters van #a tot #r de onderliggende elementen van de #parent-one, #parent-two en #parent-three id selectors.

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

7. removeChild()

De methode removeChild() verwijdert een opgegeven onderliggende element uit 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 het element dat we als een kind hebben toegevoegd aan het

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

 div.removeChild (sterk); 

8. replaceChild()

De methode replaceChild() vervangt een onderliggende element door een ander element dat behoort tot het bovenliggende element dat deze methode aanroept.

Syntaxis

 ele.replaceChild (newChildEle, oldChileEle) 

• ele - Ouderlijk element waarvan kinderen moeten worden vervangen.
• newChildEle - newChildEle van ele dat oldChildEle zal vervangen.
• oldChildEle - oldChildEle van ele, dat wordt vervangen door newChildEle .

Codevoorbeeld

In dit voorbeeld is het onderliggende element behorend tot de

bovenliggend element wordt vervangen door een nieuw aangemaakte tag.

 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 hetzelfde moet zijn als een al bestaand element op de webpagina, kunt u eenvoudig een kopie van het reeds bestaande element maken met behulp van de methode cloneNode() .

Syntaxis

var dupeEle = ele.cloneNode([deep])

• dupeEle - Kopie van het element ele .
• ele - Het HTML-element dat moet worden gekopieerd.
• deep - (optioneel) Een booleaanse waarde. Als het is ingesteld op true, heeft dupeEle alle onderliggende elementen die ele heeft, als het is ingesteld op ' false, wordt het gekloond zonder de onderliggende elementen.

Codevoorbeeld

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

label als een onderliggende element met de bovengenoemde appendChild() -methode.

Als gevolg,

bevat twee elementen, beide met de hello reeks als inhoud.

 Hallo 

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

10. insertBefore()

De methode insertBefore() 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 u expliciet null op zijn plaats doorgeeft, wordt het onderliggende element dat moet worden ingevoegd, toegevoegd als het laatste onderliggende element van het bovenliggende element (vergelijkbaar met appendChild() ).

Syntaxis

 ele.insertBefore (newEle, refEle); 

• ele - Bovenliggend element.
• newEle - Nieuw HTML-element invoegen.
• refEle - Een refEle van ele waarvoor newEle wordt ingevoegd.

Codevoorbeeld

In dit voorbeeld maken we een nieuw element met wat tekst erin, en voegen dit toe voor het element in 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 die behoort tot de appendChild() -methode. Hier hoeft u alleen de id-selectors van twee onderliggende elementen (van #a tot #r ) in de invoervakken te #r en kunt u zien hoe de methode insertBefore() het eerst opgegeven kind vóór de tweede verplaatst.

11. createDocumentFragment()

De createDocumentFragment() -methode is misschien niet zo bekend als de andere in deze lijst, maar is wel een belangrijke, vooral als u meerdere elementen in bulk wilt invoegen, zoals het toevoegen van meerdere rijen aan een tabel.

Hiermee wordt een DocumentFragment object gemaakt, dat in wezen een DOM-knooppunt is 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 lay- outwijzigingen veroorzaakt en het een duur browserproces is omdat meerdere consequente elementinserties meer lay-outwijzigingen zullen veroorzaken.

Aan de andere kant veroorzaakt het toevoegen van elementen aan een DocumentFragment object geen lay-outwijzigingen, dus u kunt er zoveel elementen aan 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 methode createElement() en voegen ze vervolgens toe aan een DocumentFragment object, en voegen dat documentfragment uiteindelijk toe aan een HTML- createElement()

met de methode appendChild() .

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 (); 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()

Soms wilt u de CSS-eigenschapswaarden van een element controleren voordat u wijzigingen aanbrengt. U kunt de eigenschap ele.style om hetzelfde te doen, maar de methode getComputedStyle() is hiervoor gemaakt en retourneert de alleen-lezen berekende waarden van alle CSS-eigenschappen van een opgegeven HTML-element.

Syntaxis

 var style = getComputedStyle (ele, [pseudoEle]) 

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

Codevoorbeeld

In dit voorbeeld ontvangen en waarschuwen we de berekende width van a

element door de methode getComputedStyle() gebruiken.

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

13. setAttribute()

De methode setAttribute() voegt een nieuw kenmerk toe aan een HTML-element of werkt de waarde van een reeds aanwezig kenmerk bij.

Syntaxis

 ele.setAttribute (naam, waarde); 

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

Codevoorbeeld

In dit voorbeeld voegen we het kenmerk contenteditable toe aan a

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

 Hallo 

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

14. getAttribute()

De methode getAttribute() retourneert de waarde van een opgegeven kenmerk dat hoort bij een bepaald HTML-element.

Syntaxis

 ele.getAttribute (name); 

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

Codevoorbeeld

In dit voorbeeld waarschuwen we de waarde van het kenmerk contenteditable dat hoort bij de

element met behulp van de methode getAttribute() .

 Hallo 

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

15. removeAttribute()

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

Syntaxis

ele.removeAttribute(name);

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

Codevoorbeeld

In dit voorbeeld verwijderen we het kenmerk contenteditable van de

element. Dientengevolge, de

kan niet meer worden bewerkt.

 Hallo 

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

WordPress Search: handige plug-ins en fragmenten

WordPress is een krachtige CMS-tool die niet alleen blogs aanstuurt, maar ook talloze forums en persoonlijke webpagina's. Veel van de aangeboden functies zijn behoorlijk geavanceerd voor de markt, maar hun zoektocht lijkt nog steeds achter te blijven. De functies bieden een zeer eenvoudige oplossing voor een uiterst complex probleem - het vinden van de juiste inhoud op uw site

(Technische en ontwerptips)

Beginnersgids voor WordPress Plugin Development

De WordPress CMS heeft het imago van ons internet veranderd en heeft een golf van nieuwe ideeën laten bloeien en haar open source-beweging heeft een sterke aanwezigheid, geworteld in software en webontwikkeling. WordPress is een blogplatform dat de mogelijkheid heeft om in vele andere scripts te starten, zoals webforums, jobboards en zelfs een klassiek Content Management Systeem voor webpagina's.

(Technische en ontwerptips)



Interessante Artikelen

Facebook rolt een curated-content-functie uit met de naam "Collections"

Chocolade verpakkingen ontwerpen: 50 heerlijke heerlijke voorbeelden

5 Tools om uw workflow en online samenwerking te beheren

40 Creative Magazine PSD-testmodellen om te downloaden