Sobes.tech
Intervyu yordami
Resurslar
Intervyuga tayyorgarlik
Resurslar
Ish qidirish
Resurslar
Huquqiy
Savollarga qaytish
Middle

HTML teglarida atributlar va xususiyatlar o'rtasidagi farq nima?

sobes.tech AI

AIdan javob

Xususiyatlar — bu HTML ning ochilish tegida to'g'ridan-to'g'ri yozilgan nom-qiymat juftlaridir. Ular elementning boshlang'ich yoki hozirgi xususiyatlarini belgilaydi, ammo ular har doim DOMdagi hozirgi holatini to'g'ridan-to'g'ri aks ettirmasligi mumkin.

Xususiyatlar — bu JavaScript ob'ektlariga bog'langan qiymatlar bo'lib, ular DOM elementlarini ifodalaydi. Ular dinamik bo'lib, elementning hozirgi holatini aks ettiradi.

Asosiy farqlar:

  • Joylashuvi: Xususiyatlar HTMLda, xususiyatlar DOM ob'ektlarida.
  • Ma'lumot turlari: Xususiyatlar har doim satr bo'ladi. Xususiyatlar turli ma'lumot turlariga ega bo'lishi mumkin (satrlar, raqamlar, mantiqiy, ob'ektlar).
  • Dinamiklik: Xususiyatlar sahifa yuklangandan so'ng statik bo'ladi (garchi ular JavaScript yordamida o'zgartirilishi mumkin). Xususiyatlar foydalanuvchi bilan o'zaro ta'sir yoki skript mantiqi bilan dinamik ravishda o'zgarishi mumkin.
  • Aloqa: Ko'plab xususiyatlar to'g'ridan-to'g'ri xususiyatlarga mos keladi (masalan, id atributi va id xususiyati). Ammo, to'g'ridan-to'g'ri xususiyatlari bo'lmagan atributlar (data-*) va xususiyatlari bo'lmagan atributlar (textContent, className) ham mavjud.

Misol:

<input type="text" value="Boshlang'ich qiymat" readonly>

Bu yerda:

  • type="text", value="Boshlang'ich qiymat" va readonly atributlar.

Sahifa yuklangandan so'ng, JavaScriptda mos keladigan xususiyatlar:

// Input elementini olamiz
const inputElement = document.querySelector('input');

// Elementning xususiyatlari
console.log(inputElement.type);     // "text" deb chiqadi (xususiyat atributga mos keladi)
console.log(inputElement.value);    // "Boshlang'ich qiymat" deb chiqadi (dastlab atributga mos keladi)
console.log(inputElement.readOnly); // true deb chiqadi (xususiyat atributga mos keladi, ammo camelCase)

Agar foydalanuvchi matnni o'zgartirsa, value xususiyati yangilanadi, ammo HTMLdagi value atributi o'zgarmaydi va faqat boshlang'ich qiymatni aks ettiradi.

// Foydalanuvchi "Yangi qiymat" kiritdi
// inputElement.value endi "Yangi qiymat" bo'ladi,
// ammo inputElement.getAttribute('value') hali ham "Boshlang'ich qiymat" ni qaytaradi.
OldingiKeyingi