Atribūti kā īpašības JavaScript

Tagad iemācīsimies iegūt elementu atribūtus. Šeit darbojas šāds noteikums: katrs elementa atribūts atbilst tāda paša nosaukuma īpašībai DOM elementā.

Apskatīsim piemērā. Pieņemsim, ka mums ir šāds elements:

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

Iegūsim atsauci uz mūsu elementu mainīgajā:

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

Izvadīsim vajadzīgo atribūtu vērtības:

console.log(elem.id);   // izvadīs 'elem'
console.log(elem.type); // izvadīs 'text'

Un tagad piemēram mainīsim atribūta vērtību:

elem.type = 'submit';

Dots šāds ievades lauks:

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

Dota arī poga. Noklikšķinot uz pogas, izvadiet uz ekrāna saturu no atribūta type norādītajā ievades laukā.

Dots šāds ievades lauks:

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

Dota arī poga. Noklikšķinot uz pogas, ierakstiet atribūtā type vērtību submit.

Pieņemsim, ka jums ir saite kā a elements, poga un rindkopa. Noklikšķinot uz pogas, izvadiet rindkopā saturu no saites atribūta href.

Pieņemsim, ka jums ir saite un poga. Noklikšķinot uz pogas, pievienojiet saites teksta beigās tās atribūta href saturu apaļās iekavās.

Pieņemsim, ka jums ir attēls. Novietojiet to lapā, izmantojot img elementu. Pieņemsim, ka ir dota arī poga un rindkopa. Izveidojiet tā, lai, noklikšķinot uz pogas, rindkopā ierakstītos ceļš uz attēlu no tā atribūta src.

Dots attēls img elementā un poga. Noklikšķinot uz pogas, atribūtā width ierakstiet vērtību 300.

Dots attēls img elementā un poga. Pieņemsim, ka atribūtā width ir iestatīts noteikts platums. Izveidojiet pogu, noklikšķinot uz kuras attēla platums palielināsies 2 reizes.

Pieņemsim, ka jums ir divi attēli. Izveidojiet lapā img elementu un divas pogas. Noklikšķinot uz pirmās pogas, ierakstiet atribūtā src ceļu uz pirmo attēlu, bet noklikšķinot uz otrās - ceļu uz otro attēlu.