ກັບໄປຫາພື້ນຖານ: ຄວາມແຕກຕ່າງລະຫວ່າງຄຸນລັກສະນະ HTML 'id' ແລະ 'ຊື່' ແມ່ນຫຍັງ?

ຮູບພາບໂດຍ Maria Teneva ໃນ Unsplash

ມັນມີຄວາມ ສຳ ຄັນແນວໃດແລະມັນແມ່ນຫຍັງ?

ຄຳ ຖາມເຫຼົ່ານີ້, ເຖິງວ່າມັນອາດເບິ່ງຄືວ່າເປັນພື້ນຖານ, ແຕ່ມັນມີຄວາມກ່ຽວຂ້ອງແລະຈຸດປະສົງຂອງໂພດສນີ້ແມ່ນຈະຕອບພວກເຂົາໄດ້ຢ່າງແນ່ນອນ.

ສະນັ້ນ, ໃນບັນດາສອງອົງປະກອບນີ້, ຄວາມເຂົ້າໃຈງ່າຍທີ່ສຸດ (ແລະມີພະລັງທີ່ສຸດ) ແມ່ນຄຸນລັກສະນະຂອງ 'id.

ຄຸນລັກສະນະຂອງ 'id':

ຄຸນລັກສະນະນີ້, ຖືກຖືວ່າເປັນຄຸນລັກສະນະທົ່ວໂລກເຊິ່ງປະກອບດ້ວຍຄຸນລັກສະນະທີ່ມີລັກສະນະທົ່ວໄປກັບທຸກໆອົງປະກອບ HTML - ສ່ວນປະກອບ HTML ໃດກໍ່ຕາມສາມາດມີຄຸນລັກສະນະ id.
ຕາມ ຄຳ ນິຍາມ, ຄຸນລັກສະນະນີ້ຖືກຖືວ່າເປັນເອກະລັກສະເພາະ (ID) ແລະ ໝາຍ ຄວາມວ່າມັນຕ້ອງມີເອກະລັກສະເພາະຕໍ່ ໜ້າ HTML.

ມັນແມ່ນຫຍັງ?

ຄຸນລັກສະນະ id ຖືກນໍາໃຊ້ຕົ້ນຕໍໃນ JavaScript ເພື່ອໃຫ້ໄດ້ຮັບການເຂົ້າເຖິງໂດຍກົງກັບອົງປະກອບທີ່ຕ້ອງການ.
ຕົວຢ່າງການ ນຳ ໃຊ້:

var myElement = ເອກະສານ .getElementById ('myelementid');

ສະຖານະການອື່ນທີ່ມັນສາມາດໃຊ້ (ອີງຕາມສະຖານະການຂອງທ່ານ, ວິທີການທີ່ດີກວ່າສາມາດໃຊ້ຫ້ອງຮຽນທີ່ໃຊ້ ໃໝ່ ໄດ້) ແມ່ນຜ່ານຄໍເຕົ້າໄຂ່ CSS ໂດຍໃຊ້ຕົວເລືອກ id, ຕົວຢ່າງ:

#myelementid {
 ພື້ນຫລັງສີ: ສີແດງ;
}

ຄຸນລັກສະນະ 'ຊື່':

ອີກດ້ານ ໜຶ່ງ, ຄຸນລັກສະນະຂອງຊື່, ພຽງແຕ່ໃຊ້ກັບບາງອົງປະກອບ HTML, ເຊັ່ນ: ການປ້ອນຂໍ້ມູນ, ປຸ່ມ, ເລືອກ, ແລະອື່ນໆ.

ມັນແມ່ນຫຍັງ?

ຄຸນລັກສະນະຂອງຊື່ແມ່ນໃຊ້ເພື່ອສົ່ງຂໍ້ມູນແບບຟອມໄປຫາ web server.
ເມື່ອພວກເຮົາສົ່ງແບບຟອມ, ຄຸນຄ່າໃນອົງປະກອບ HTML ຂອງທ່ານເຊັ່ນການປ້ອນຂໍ້ມູນ, ປຸ່ມ, ເລືອກ, ແລະອື່ນໆຖືກສົ່ງໂດຍໃຊ້ຄຸນລັກສະນະຊື່ແລະບໍ່ແມ່ນ id - ນັ້ນແມ່ນສິ່ງທີ່ ສຳ ຄັນ!

ໃຫ້ພິຈາລະນາອົງປະກອບ HTML ຕໍ່ໄປນີ້:

ອົງປະກອບນີ້:

  • ແມ່ນອົງປະກອບການປ້ອນຂໍ້ມູນປະເພດຂໍ້ຄວາມ, ເຊັ່ນວ່າອະນຸຍາດໃຫ້ແນະ ນຳ ຕົວອັກສອນຕົວ ໜັງ ສື
  • ປະກອບດ້ວຍຂໍ້ຄວາມ 'ຕົວແທນໃຫຍ່'
  • ຄຸນລັກສະນະ id ມີຄຸນຄ່າ 'ຊື່ຜູ້ໃຊ້'
  • ຄຸນລັກສະນະຊື່ມີຄຸນຄ່າ 'ຊື່ຜູ້ໃຊ້'
  • ທ່ານສາມາດພົວພັນກັບມັນໂດຍໃຊ້:
document.getElementById ('ຊື່ຜູ້ໃຊ້'). ມູນຄ່າ = 'megauser';
  • ທ່ານຍັງສາມາດພົວພັນກັບມັນໂດຍໃຊ້ຕົວເລືອກຊື່ (OK, ທ່ານສາມາດເຮັດມັນໄດ້, ແຕ່ແນະ ນຳ ໃຫ້ໃຊ້ຄຸນລັກສະນະ id ເພາະມັນມີປະສິດທິພາບຫຼາຍ):
document.querySelector ("ວັດສະດຸປ້ອນ [ຊື່ = 'ຊື່ໃຊ້']"). ມູນຄ່າ = 'ນັກທົດສອບ';
  • ທ່ານສາມາດສະ ໝັກ ຮູບແບບ CSS ໂດຍໃຊ້ຕົວເລືອກ id:
# ຊື່ຜູ້ໃຊ້ {font-weight: 700}
  • ນອກນັ້ນທ່ານຍັງສາມາດປະຕິບັດຄໍເຕົ້າໄຂ່ທີ່ CSS ໂດຍໃຊ້ຕົວເລືອກຊື່ (ທ່ານຍັງສາມາດເຮັດແບບນີ້ໄດ້, ແຕ່ວ່າມັນບໍ່ໄດ້ຖືກແນະ ນຳ ເຊັ່ນດຽວກັນເພາະວ່າໃນກໍລະນີນີ້ຮູບແບບຂອງທ່ານແມ່ນສົມຄູ່ກັບເອກະສານຂອງທ່ານ - ຖ້າທ່ານປ່ຽນຊື່ຂອງອົງປະກອບຂອງທ່ານທ່ານຈະສູນເສຍຮູບແບບຕ່າງໆ ):
ວັດສະດຸປ້ອນ [name = 'myusername'] {padding: 20px; }

ເຖິງຢ່າງໃດກໍ່ຕາມ, ເມື່ອແບບຟອມຖືກສົ່ງໄປຫາເຊີບເວີ, ຄຸນລັກສະນະ id ຈະບໍ່ຖືກ ນຳ ໃຊ້, ແລະນີ້ແມ່ນບ່ອນທີ່ຊື່ຂອງຄຸນລັກສະນະຈະມີຄວາມກ່ຽວຂ້ອງ.
ໃນກໍລະນີພິເສດນີ້, ມູນຄ່າການປ້ອນຂໍ້ມູນຈະຖືກສົ່ງດ້ວຍມູນຄ່າຂອງ "ຜູ້ສ້າງ" ເຊັ່ນດຽວກັນກັບຊື່ "ຊື່" ຂອງອົງປະກອບທີ່ກ່ຽວຂ້ອງ - ດັ່ງນັ້ນ, ຂໍ້ມູນທີ່ສົ່ງມາຈະ:

myusername = superuser

ຂ້ອຍສາມາດມີອົງປະກອບ HTML ທີ່ມີສອງຄຸນລັກສະນະນີ້ບໍ?

ແນ່ນອນ, ຄຸນລັກສະນະທັງສອງຂອງ HTML ນີ້ໃຫ້ສົມບູນເຊິ່ງກັນແລະກັນ. ທ່ານສາມາດໃຊ້ ID ເພື່ອພົວພັນກັບອົງປະກອບໂດຍ JavaScript ຫຼື CSS ແລະຊື່ເພື່ອໂອນຂໍ້ມູນໄປຍັງ server.

ໃນເອກະສານສະເພາະຂອງ HTML 3.2 (ລົງວັນທີມັງກອນ 1997) ທ່ານສາມາດຊອກຫາເອກະສານອ້າງອີງລະອຽດກ່ຽວກັບຄຸນລັກສະນະຂອງຊື່ແລະການອ້າງອີງເຖິງ id ພຽງແຕ່ແມ່ນ:

ຄຸນລັກສະນະຂອງ ID, CLASS ແລະ STYLE ບໍ່ໄດ້ລວມຢູ່ໃນ HTML ສະບັບນີ້.

ມັນສະຫຼຸບໄດ້ວ່າຄຸນລັກສະນະຊື່ໄດ້ຖືກສ້າງຂື້ນກ່ອນແລະ id ໄດ້ຖືກສ້າງຂື້ນພາຍຫຼັງ.

ເອກະສານອ້າງອີງ: