Allt du behöver veta om DOM i JavaScript



Den här artikeln ger dig en detaljerad och omfattande kunskap om Document Object Model, dvs. DOM i JavaScript.

Visste du att vi kan använda JavaScript för att manipulera innehåll på webbsidan? Verkar intressant, eller hur? Låt oss förstå vad som är Document Object Model dvs. DOM i JavaScript på följande sätt:

Vad är DOM i JavaScript?

Dokumentobjektmodellen eller DOM skapas av webbläsaren när en webbsida laddas. I grafisk form är det som ett träd av element som också kallas noder, som används för att representera varje enskilt element på sidan.





Hela DOM på vår webbsida sitter inne i dokumentobjektet. Programmatiskt låter den här modellen oss läsa eller till och med ändra innehållet på vår sida via . Är det inte coolt?

Åtgärder av DOM i JavaScript

Några av de åtgärder som vi kan utföra med den här modellen är:



  • Ändra / ta bort HTML-element i DOM / på sidan.

  • Ändra och lägg till CSS-stilar till element

  • Läs och ändra attribut (href, src, alt), etc.



  • Skapa nya element och sätt in dem i DOM / sidan.

  • Bifoga evenemangslyssnare till element (klicka, knapptryck, skicka)

Fråga DOM i JavaScript

Att ta ett HTML-element eller få tag i det för att lägga till / ändra eller innehåll kallas förfrågan.

HTML-kod:

Javascript och DOM h1 {font-size: 60px}

JavaScript-kod:

generera slumpmässig sträng i Java
var title = document.getElementById ('title') // cgangin color to red title.style.color = 'red' var body = document.getElementById ('body') // ändra bakgrundsfärgen till ljusblå body.style. backgroundColor = 'ljusblå'

Vi ändrade textfärgen på titeln från svart till rött med JavaScript. Vi uppnådde detta med hjälp av .stil egenskap ändrade sedan värdet på Färg till lika med netto .

Låt oss nu ändra bakgrundsfärgen på kroppselementet till ljusblå .

Med detta kommer vi till ett slut på denna DOM i JavaScript-artikel. Jag hoppas att du förstår hur dokumentobjektmodeller fungerar och hur du implementerar samma DOM i JavaScript.

Nu när du känner till DOM i JavaScript, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig att skapa imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuera den till Amazon Simple Storage Service (S3).

Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i “DOM i JavaScript” så återkommer vi till dig.