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?
- Handlinger af DOM i JavaScript
- Forespørgsel om DOM
- Lytte til begivenheder
- Interagerer med formularer
- Oprettelse af HTML-elementer
- Tilføjelse af CSS
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.