Tag-attributen als eigenschappen in JavaScript

Laten we nu leren hoe we attributen van tags kunnen ophalen. Hier geldt de volgende regel: voor elk attribuut van een tag hoort een gelijknamige eigenschap van het DOM-element.

Laten we een voorbeeld bekijken. Stel we hebben de volgende tag:

<input id="elem" type="text">

Laten we een verwijzing naar ons element in een variabele zetten:

let elem = document.querySelector('#elem');

Laten we de waarden van de attributen die we nodig hebben weergeven:

console.log(elem.id);   // geeft 'elem' weer
console.log(elem.type); // geeft 'text' weer

Laten we nu als voorbeeld de waarde van het attribuut wijzigen:

elem.type = 'submit';

Gegeven de volgende input:

<input id="elem" type="email">

Er is ook een knop. Druk op de knap en geef weer op het scherm de inhoud van het attribuut type van de bovenstaande input.

Gegeven de volgende input:

<input id="elem" type="email">

Er is ook een knop. Druk op de knop en schrijf in het attribuut type de waarde submit.

Stel je hebt een link in de vorm van een a tag, een knop en een paragraaf. Druk op de knop en geef in de paragraaf de inhoud van het attribuut href van de link weer.

Stel je hebt een link en een knop. Druk op de knop en voeg aan het einde van de linktekst de inhoud van het attribuut href toe tussen ronde haken.

Stel je hebt een afbeelding. Plaats deze op de pagina met de img tag. Stel er is ook een knop en een paragraaf. Zorg ervoor dat bij het klikken op de knop in de paragraaf het pad naar de afbeelding uit het attribuut src wordt weggeschreven.

Gegeven een afbeelding in de img tag en een knop. Druk op de knop en schrijf in het attribuut width de waarde 300.

Gegeven een afbeelding in de img tag en een knop. Stel dat in het attribuut width een bepaalde breedte is ingesteld. Maak een knop waarmee, wanneer erop wordt gedrukt, de breedte van de afbeelding 2 keer wordt vergroot.

Stel je hebt twee afbeeldingen. Maak op de pagina een img tag en twee knoppen. Druk op de eerste knop en schrijf in het attribuut src het pad naar de eerste afbeelding, en druk op de tweede - het pad naar de tweede afbeelding.