Alt hvad du behøver at vide om DOM i JavaScript

Denne artikel vil give dig en detaljeret og omfattende viden om Document Object Model dvs. DOM i JavaScript.

Vidste du, at vi kan bruge JavaScript til at manipulere indhold på websiden? Synes det er interessant, ikke? Lad os forstå, hvad der er Document Object Model, dvs. DOM i JavaScript på følgende måde:



Hvad er DOM i JavaScript?

Dokumentobjektmodellen eller DOM oprettes af browseren, når en webside indlæses. I grafisk form er det som et træ af elementer, også kaldet noder, som bruges til at repræsentere hvert enkelt element på siden.



Alle DOM på vores webside sidder inde i dokumentobjektet. Programmatisk giver denne model os mulighed for at læse eller endda ændre indholdet på vores side via . Er det ikke sejt?

Handlinger af DOM i JavaScript

Nogle af de handlinger, vi kan udføre med denne model, er:



  • Skift / fjern HTML-elementer i DOM / på siden.

  • Skift og tilføj CSS-stilarter til elementer

    forskellige typer rammer i selen
  • Læs og skift attributter (href, src, alt) osv.



  • Opret nye elementer og indsæt dem i DOM / siden.

  • Vedhæft begivenhedslyttere til elementer (klik, tastetryk, indsend)

Forespørgsel om DOM i JavaScript

At gribe et HTML-element eller få fat i det for at tilføje / ændre eller indhold kaldes forespørgsel.

HTML-kode:

hvad der er hashmap og hashtable i java
Javascript og DOM h1 {font-size: 60px}

JavaScript-kode:

var title = document.getElementById ('title') // cgangin color to red title.style.color = 'red' var body = document.getElementById ('body') // ændring af baggrundsfarven til lyseblå body.style. backgroundColor = 'lyseblå'

Vi ændrede tekstfarven på titlen fra sort til rød ved hjælp af JavaScript. Vi opnåede dette ved hjælp af .stil egenskab ændrede derefter værdien af farve at svare til net .

Lad os nu ændre baggrundsfarven på kropselementet til lyseblå .

hvordan man erklærer en instansvariabel i java

Med dette slutter vi denne DOM i JavaScript-artikel. Jeg håber, du har forstået, hvordan dokumentobjektmodeller fungerer, og hvordan du implementerer den samme DOM i JavaScript.

Nu hvor du kender til DOM i JavaScript, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).

Har du et spørgsmål til os? Nævn det i kommentarfeltet i “DOM i JavaScript”, så vender vi tilbage til dig.