nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


15 JavaScript-methoden voor DOM-manipulatie voor webontwikkelaars

Als webontwikkelaar moet u vaak de DOM manipuleren, het objectmodel dat door browsers wordt gebruikt om de logische structuur van webpagina's te specificeren en op basis van deze structuur HTML-elementen op het scherm weergeven .

HTML definieert de standaard DOM-structuur . In veel gevallen wilt u dit misschien wel manipuleren met JavaScript, meestal om extra functionaliteiten aan een site toe te voegen .

In dit bericht vindt u een lijst met 15 standaard JavaScript-methoden die helpen bij DOM-manipulatie . Je zou deze methoden waarschijnlijk vaak in je code gebruiken en je zult ze ook tegenkomen in onze JavaScript-tutorials.

1. querySelector()

De methode querySelector() retourneert het eerste element dat overeenkomt met een of meer CSS-kiezers . Als er geen overeenkomst wordt gevonden, wordt deze null geretourneerd.

Voordat querySelector() werd geïntroduceerd, hebben ontwikkelaars veel gebruik gemaakt van de methode getElementById() waarmee een element met een opgegeven id waarde wordt getElementById() .

Hoewel getElementById() nog steeds een nuttige methode is, zijn we met de nieuwere querySelector() en querySelectorAll() -methoden vrij om elementen te targeten op basis van een CSS-selector, waardoor we meer flexibiliteit hebben.

Syntaxis
 var ele = document.querySelector (selector); 
  • ele - Eerste overeenkomstelement of null (als geen element overeenkomt met de selectors)
  • selector - een of meer CSS-selectors, zoals "#fooId", ".fooClassName", ".class1.class2" of ".class1, .class2"
Codevoorbeeld

In dit voorbeeld de eerste

wordt geselecteerd met de methode querySelector() en de kleur ervan wordt rood.

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.   
  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).
optiesWat gebeurt er als het op Waar is ingesteld?
capture

Stopt het borrelen van gebeurtenissen, dwz 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:

  1. ele.addEventListener(evt, listener, true)
  2. ele.addEventListener(evt, listener, {capture:true});
once

Luisteraar wordt alleen de eerste keer dat de gebeurtenis plaatsvindt genoemd, dan wordt deze automatisch verwijderd van de gebeurtenis en wordt deze niet meer geactiveerd.

passive

De standaardactie van de gebeurtenis kan niet worden gestopt met de methode preventDefault ().

Codevoorbeeld

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

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

Hoe tweeledige verificatie aan cPanel en WHM toe te voegen

Hoe tweeledige verificatie aan cPanel en WHM toe te voegen

Het toevoegen van een extra beveiligingslaag aan uw website is altijd een goed idee. Het maakt het moeilijker voor hackers om door je backend heen te dringen en toegang te krijgen tot dingen waarvan je niet wilt dat ze dat doen. In deze post ga ik je laten zien hoe je two-factor authenticatie (2FA) kunt toevoegen aan het configuratiescherm van je webhosting - cPanel

(Technische en ontwerptips)

Verse bronnen voor webontwikkelaars - augustus 2017

Verse bronnen voor webontwikkelaars - augustus 2017

Er zijn een aantal open source-bedrijven die samenwerken om nuttige webbronnen en hulpmiddelen te bieden die iedereen gratis kan gebruiken . Dit is wat de webgemeenschap doet gedijen, innoveren en nuttiger hulpbronnen produceren.In dit deel van de Fresh Resources-reeks heb ik een aantal nieuwe bronnen uit verschillende categorieën samengesteld, waaronder een app waarmee je Sketch-plug-ins op verschillende computers kunt beheren, een verzameling iconische lettertypen voor je nerd soul, een paar desktop-apps en een handvol anderen.

(Technische en ontwerptips)