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?
- Åtgärder av DOM i JavaScript
- Fråga DOM
- Lyssna på händelser
- Interagerar med formulär
- Skapa HTML-element
- Lägga till CSS
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.