Тег атрибутлари JavaScriptда хосса сифатида

Келинг энди тег атрибутларини олишни ўрганамиз. Бу ерда куйидаги қоид амал қилади: ҳар бир тег атрибутига DOM элементнинг шу номли хоссаси мос келади.

Келинг мисолда кўрамиз. Бизда куйидаги тег бор деб фараз қилайлик:

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

Элементга ҳаволани ўзгарувчига оламиз:

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

Керакли атрибутларнинг қийматларини чиқарамиз:

console.log(elem.id);   // чиқаради 'elem'
console.log(elem.type); // чиқаради 'text'

Энди эса мисол учун атрибут қийматини ўзгартирамиз:

elem.type = 'submit';

Куйидаги инпут берилган:

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

Тугма ҳам берилган. Тугма босилганда экранга юқорида кўрсатилган инпутнинг type атрибутининг мазмунини чиқаринг.

Куйидаги инпут берилган:

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

Тугма ҳам берилган. Тугма босилганда type атрибутига submit қийматини ёзинг.

Сизда a теги шаклидаги ҳавола, тугма ва абзац бор деб фараз қилайлик. Тугма босилганда ҳаволанинг href атрибутининг мазмунини абзацга чиқаринг.

Сизда ҳавола ва тугма бор деб фараз қилайлик. Тугма босилганда ҳавола матнининг охирига унинг href атрибутининг мазмунини айланма қавс ичида қўшинг.

Сизда расм бор деб фараз қилайлик. Уни img теги ёрдамида саҳифага жойлаштиринг. Тугма ва абзац ҳам берилган деб фараз қилайлик. Тугма босилганда абзацга расмнинг src атрибутидан олинган йўл ёзилиши учун қилинг.

img тегидаги расм ва тугма берилган. Тугма босилганда width атрибутига 300 қийматини ёзинг.

img тегидаги расм ва тугма берилган. width атрибутида маълум энли кўрсатилган деб фараз қилайлик. Расм эни 2 марта ошадиган тугма ясанг.

Сизда иккита расм бор деб фараз қилайлик. Саҳифада img теги ва иккита тугма ясанг. Биринчи тугма босилганда src атрибутига биринчи расмнинг йўли ёзилсин, иккинчи тугма босилганда эса иккинчи расмнинг йўли ёзилсин.