Tagien attribuutit ominaisuuksina JavaScriptissä

Opitaan nyt hakemaan tagien attribuutteja. Tässä pätee seuraava sääntö: jokainen tagin attribuutti vastaa samannimistä DOM-elementin ominaisuutta.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on tällainen tagi:

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

Haetaan viite elementtiimme muuttujaan:

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

Tulostetaan tarvitsemiemme attribuuttien arvot:

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

Vaihdetaan nyt esimerkiksi attribuutin arvo:

elem.type = 'submit';

Annettu on seuraava input-kenttä:

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

Annettu on myös painike. Painikkeen klikkauksella tulosta ruudulle yllä olevan input-kentän type-attribuutin sisältö.

Annettu on seuraava input-kenttä:

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

Annettu on myös painike. Painikkeen klikkauksella kirjoita type-attribuuttiin arvo submit.

Oletetaan, että sinulla on linkki a-tagina, painike ja kappale. Painikkeen klikkauksella tulosta kappaleeseen linkin href-attribuutin sisältö.

Oletetaan, että sinulla on linkki ja painike. Painikkeen klikkauksella lisää linkin tekstin loppuun sen href-attribuutin sisältö pyöreissä suluissa.

Oletetaan, että sinulla on kuva. Sijoita se sivulle img-tagin avulla. Oletetaan, että on annettu myös painike ja kappale. Tee niin, että painikkeen klikkauksella kappaleeseen kirjoitetaan kuvan polku sen src-attribuutista.

Annettu on kuva img-tagissa ja painike. Painikkeen klikkauksella kirjoita width- attribuuttiin arvo 300.

Annettu on kuva img-tagissa ja painike. Oletetaan, että width-attribuutissa on asetettu tietty leveys. Tee painike, jonka klikkauksella kuvan leveys kaksinkertaistuu.

Oletetaan, että sinulla on kaksi kuvaa. Tee sivulle img-tagi ja kaksi painiketta. Ensimmäisen painikkeen klikkauksella kirjoita src- attribuuttiin polku ensimmäiseen kuvaan, ja toisen painikkeen klikkauksella polku toiseen kuvaan.