ເຂົ້າໃຈການເຮັດວຽກຂອງ DOM: ວິທີໃຊ້ JavaScript ສ້າງ ແລະ ຄວບຄຸມໜ້າເວັບ
ບົດນໍາ
ຖ້າທ່ານເຄີຍເຫັນ Code JavaScript ທີ່ມີຄໍາວ່າ document ຢູ່ທາງໜ້າ ເຊັ່ນ: document.getElementById ຫຼື document.createElement ແລ້ວສົງໄສວ່າມັນຄືຫຍັງ? ເປັນຫຍັງຕ້ອງມີຄໍານີ້? ບົດຄວາມນີ້ມີຄໍາຕອບໃຫ້ທ່ານ.
ໂຄງສ້າງໜ້າເວັບທີ່ເຮົາຂຽນດ້ວຍ HTML ນັ້ນ, ເມື່ອຖືກເປີດຂຶ້ນມາເທິງ Browser ມັນຈະຖືກປ່ຽນໃຫ້ກາຍເປັນ "ວັດຖຸ" (Object) ເພື່ອໃຫ້ພາສາ JavaScript ສາມາດເຂົ້າໄປອ່ານ ແລະ ແກ້ໄຂໄດ້. ລະບົບການປ່ຽນແປງນີ້ເອີ້ນວ່າ DOM (Document Object Model). ການເຂົ້າໃຈ DOM ຄືກຸນແຈສໍາຄັນທີ່ຈະປ່ຽນເວັບໄຊທໍາມະດາ ໃຫ້ກາຍເປັນ Web Application ທີ່ສາມາດໂຕ້ຕອບກັບຜູ້ໃຊ້ງານໄດ້ຢ່າງເຕັມຮູບແບບ. ມື້ນີ້ເຮົາຈະມາຮຽນຮູ້ວິທີການຄວບຄຸມ DOM ຂັ້ນພື້ນຖານໄປນໍາກັນ!
DOM ແມ່ນຫຍັງແທ້?
DOM ປຽບເໝືອນ "ຕົ້ນໄມ້ຄອບຄົວ" (Tree Structure) ຂອງໜ້າເວັບໄຊ. ເມື່ອ Browser ອ່ານໄຟລ໌ HTML ມັນຈະສ້າງໂຄງສ້າງຕົ້ນໄມ້ນີ້ຂຶ້ນມາ ໂດຍມີ document ເປັນຮາກຖານໃຫຍ່ທີ່ສຸດ (ຈຸດເລີ່ມຕົ້ນ). ຈາກນັ້ນກໍຈະແຕກງ່າອອກໄປຫາ element ຕ່າງໆ ເຊັ່ນ <html>, <head>, <body> ແລະ ຍ່ອຍລົງໄປຫາ <div>, <h1>, <p> ຕາມລໍາດັບ.
ທຸກໆ element ເທິງໜ້າເວັບຈະກາຍເປັນ Node (ຂໍ້ຕໍ່) ໃນ DOM ເຊິ່ງ JavaScript ສາມາດເຂົ້າເຖິງ Node ເຫຼົ່ານີ້ ເພື່ອສັ່ງປ່ຽນສີ, ປ່ຽນຂໍ້ຄວາມ, ລຶບຖິ້ມ ຫຼື ແມ່ນກະທັ່ງສ້າງ Node ໃໝ່ຂຶ້ນມາແລ້ວຍັດເຂົ້າໄປໃນໜ້າເວັບກໍໄດ້.
1. ການເລືອກອົງປະກອບ (Selecting Elements)
ກ່ອນທີ່ເຮົາຈະສັ່ງໃຫ້ JavaScript ປ່ຽນແປງຫຍັງເທິງໜ້າເວັບ ເຮົາຕ້ອງ "ຊອກຫາ" ຫຼື "ເລືອກ" element ນັ້ນໃຫ້ເຫັນກ່ອນ. ຄໍາສັ່ງທີ່ນິຍົມໃຊ້ມີດັ່ງນີ້:
document.getElementById('id-name'): ໃຊ້ຄົ້ນຫາ element ທີ່ມີ id ກົງກັບທີ່ກໍານົດ (ໄວທີ່ສຸດ ແຕ່ໄດ້ພຽງອັນດຽວ ເພາະ id ຫ້າມຊໍ້າກັນ).document.querySelector('.class-name'): ໃຊ້ຄົ້ນຫາ element ໂດຍໃຊ້ CSS Selector (ຄືກັນກັບຕອນຂຽນ CSS). ມັນຈະດຶງເອົາໂຕທໍາອິດທີ່ມັນຄົ້ນພົບ.document.querySelectorAll('.class-name'): ເໝືອນກັບຂໍ້ເທິງ ແຕ່ຈະດຶງເອົາທຸກໆ element ທີ່ກົງກັນມາເກັບເປັນ Array.
ຕົວຢ່າງການນໍາໃຊ້:
<h1 id="main-title">ສະບາຍດີ LaoCourse</h1>
<p class="desc">ນີ້ຄືຂໍ້ຄວາມອະທິບາຍ</p>// ເລືອກຜ່ານ ID
const title = document.getElementById('main-title');
// ເລືອກຜ່ານ Class ດ້ວຍ querySelector
const description = document.querySelector('.desc');
// ປ່ຽນຂໍ້ຄວາມທາງໃນ element ດ້ວຍ textContent
title.textContent = "ຍິນດີຕ້ອນຮັບສູ່ໂລກຂອງ JavaScript!";2. ການແກ້ໄຂອົງປະກອບ (Manipulating Elements)
ເມື່ອເຮົາເລືອກ element ມາໄດ້ແລ້ວ ເຮົາສາມາດເຮັດຫຍັງກັບມັນກໍໄດ້. ສິ່ງທີ່ນັກພັດທະນາມັກຈະເຮັດມີ:
- ປ່ຽນຂໍ້ຄວາມ: ໃຊ້
.textContentຫຼື.innerHTML(ຖ້າຕ້ອງການແຊກ HTML tags ເຂົ້າໄປນໍາ). - ປ່ຽນສີ ຫຼື ສະຕາຍລ໌ (Style): ໃຊ້
.style.ຊື່Propertyເຊັ່ນ.style.color = 'red'. - ຈັດການ Class: ໃຊ້
.classList.add(),.classList.remove()ຫຼື.classList.toggle()ຄືກັບທີ່ເຮົາເຮັດໃນບົດຄວາມ Dark Mode.
3. ການສ້າງອົງປະກອບໃໝ່ (Creating & Appending Elements)
ນີ້ຄືສິ່ງທີ່ເກີດຂຶ້ນໃນຮູບພາບ Code ຕົວຢ່າງຂ້າງເທິງ! ເຮົາສາມາດສັ່ງໃຫ້ JavaScript ສ້າງ element ໃໝ່ທີ່ບໍ່ເຄີຍມີໃນ HTML ມາກ່ອນ ແລ້ວນໍາໄປວາງໄວ້ໃນຈຸດທີ່ຕ້ອງການໄດ້ ໂດຍຜ່ານ 2 ຂັ້ນຕອນ:
- ສ້າງ element ໃໝ່ດ້ວຍ
document.createElement('ຊື່tag') - ນໍາໄປວາງໄວ້ໃນ element ພໍ່/ແມ່ ດ້ວຍຄໍາສັ່ງ
appendChild()
ຕົວຢ່າງການສ້າງລາຍການໃໝ່:
<!-- ໂຄງສ້າງ HTML ຫຼັກ -->
<ul id="my-list">
<li>ລາຍການທີ 1</li>
</ul>// 1. ເລືອກ element ແມ່ທີ່ເຮົາຈະເອົາຂອງໄປຍັດໃສ່
const list = document.getElementById('my-list');
// 2. ສ້າງ element ໃໝ່ (ຍັງລອຍຢູ່ໃນອາກາດ ບໍ່ທັນສະແດງຜົນ)
const newItem = document.createElement('li');
// 3. ໃສ່ຂໍ້ຄວາມໃຫ້ກັບ element ທີ່ສ້າງໃໝ່
newItem.textContent = "ລາຍການທີ 2 (ສ້າງຈາກ JS)";
newItem.style.color = "blue"; // ປ່ຽນສີໃຫ້ເຫັນຊັດເຈນ
// 4. ເອົາ element ໃໝ່ໄປຕໍ່ທ້າຍລູກໆຂອງ element ແມ່
list.appendChild(newItem);ເມື່ອ Code ນີ້ເຮັດວຽກ, ທ່ານຈະເຫັນ "ລາຍການທີ 2" ໂຜ່ຂຶ້ນມາເທິງໜ້າເວັບໂດຍອັດຕະໂນມັດ ທັງໆທີ່ເຮົາບໍ່ໄດ້ຂຽນມັນລົງໃນໄຟລ໌ HTML ເລີຍ!
ສະຫຼຸບ
DOM (Document Object Model) ຄືຂົວເຊື່ອມຕໍ່ລະຫວ່າງ JavaScript ກັບ ໜ້າເວັບໄຊຂອງທ່ານ. ມັນອະນຸຍາດໃຫ້ທ່ານສາມາດ:
- ຊອກຫາ (Select) ອົງປະກອບຕ່າງໆເທິງໜ້າເວັບ.
- ແກ້ໄຂ (Manipulate) ຂໍ້ມູນ, ສີສັນ ແລະ ສະຕາຍລ໌.
- ສ້າງໃໝ່ (Create) ແລະ ເພີ່ມລູກຫຼິ້ນເຂົ້າໄປໃນເວັບໄຊໄດ້ແບບສົດໆ.
