Alt du trenger å vite om DOM i JavaScript

Visste du at vi kan bruke JavaScript til å manipulere innhold på websiden? Virker interessant, ikke sant? La oss forstå hva som er Document Object Model dvs. DOM i JavaScript på følgende måte:

• Hva er DOM i JavaScript?
• Handlinger av DOM i JavaScript
• Spørring av DOM
• Lytte til hendelser
• Samhandler med skjemaer
• Opprette HTML-elementer
• Legger til CSS

Hva er DOM i JavaScript?

Document Object Model eller DOM opprettes av nettleseren når en webside lastes inn. I grafisk form er det som et tre av elementer, også kalt noder, som brukes til å representere hvert enkelt element på siden.

All DOM på nettsiden vår sitter inne i dokumentobjektet. Programmatisk lar denne modellen oss lese eller til og med endre innholdet på siden vår via . Er det ikke kult?

Handlinger av DOM i JavaScript

Noen av handlingene vi kan utføre med denne modellen er:

• Endre / fjerne HTML-elementer i DOM / på siden.

• Endre og legg til CSS-stiler til elementer

• Les og endre attributter (href, src, alt) osv.

  
  
  

• Lag nye elementer og sett dem inn i DOM / siden.

  øktadministrasjon i java webapplikasjon

• Fest hendelseslyttere til elementer (klikk, tastetrykk, send inn)

Spørring av DOM i JavaScript

Å gripe et HTML-element eller få tak i det for å legge til / endre eller innhold kalles spørring.

hva gjør iterator i java

HTML-kode:

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') // endring av bakgrunnsfargen til lyseblå body.style. backgroundColor = 'lyseblå'

Vi endret tekstfargen på tittelen fra svart til rødt ved hjelp av JavaScript. Vi oppnådde dette ved hjelp av .stil eiendom endret deretter verdien av farge til å være lik nett .

La oss nå endre bakgrunnsfargen til kroppselementet til lyse blå .

Med dette kommer vi til en slutt på denne DOM i JavaScript-artikkelen. Jeg håper du har fått en forståelse av hvordan Document Object Models fungerer og hvordan du implementerer den samme DOM i JavaScript.

Nå som du vet om DOM i JavaScript, sjekk ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).

Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet i “DOM i JavaScript”, så kommer vi tilbake til deg.