Wist je dat we JavaScript kunnen gebruiken om inhoud op de webpagina te manipuleren? Lijkt interessant toch? Laten we eens kijken wat het Document Object Model is, dwz. DOM in JavaScript op de volgende manier:
- Wat is DOM in JavaScript?
- Acties van DOM in JavaScript
- Opvragen van de DOM
- Luisteren naar evenementen
- Interactie met formulieren
- HTML-elementen maken
- CSS toevoegen
Wat is DOM in JavaScript?
Het documentobjectmodel of DOM wordt door de browser gemaakt wanneer een webpagina wordt geladen. In grafische vorm is het als een boom van elementen, ook wel knooppunten genoemd, die worden gebruikt om elk afzonderlijk element op de pagina weer te geven.
De hele DOM van onze webpagina bevindt zich in het documentobject. Programmatisch stelt dit model ons in staat om de inhoud van onze pagina te lezen of zelfs te wijzigen via . Is het niet cool?
Acties van DOM in JavaScript
Enkele van de acties die we met dit model kunnen uitvoeren, zijn:
Wijzig / verwijder HTML-elementen in de DOM / op de pagina.
Wijzig en voeg CSS-stijlen toe aan elementen
c ++ stl sollicitatievragen
Lees en verander attributen (href, src, alt), etc.
Maak nieuwe elementen en voeg ze in de DOM / pagina in.
Voeg gebeurtenislisten toe aan elementen (klik, toetsaanslag, verzenden)
Het DOM opvragen in JavaScript
Het grijpen van een HTML-element of het bemachtigen om toe te voegen / te wijzigen of inhoud wordt doorvragen genoemd.
HTML code:
sql server tutorials voor beginners
Javascript en de DOM h1 {font-size: 60px}JavaScript-code:
var title = document.getElementById ('title') // cgangin kleur naar rood title.style.color = 'rood' var body = document.getElementById ('body') // de achtergrondkleur veranderen in lichtblauw body.style. backgroundColor = 'lichtblauw'converteer string datum naar datum
We hebben de tekstkleur van de titel veranderd van zwart naar rood met JavaScript. We hebben dit bereikt met behulp van de .stijl property veranderde vervolgens de waarde van kleur gelijk aan netto- .
Laten we nu de achtergrondkleur van het body-element wijzigen in lichtblauw .
Hiermee komen we aan het einde van dit DOM in JavaScript-artikel. Ik hoop dat je begrijpt hoe documentobjectmodellen werken en hoe je dezelfde DOM in JavaScript kunt implementeren.
Nu je meer weet over DOM in JavaScript, kun je het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van 'DOM in JavaScript' en we nemen contact met u op.