ພາລະກິດ querySelector() ຂອງ HTML DOM Document
- ຄືນຊຸມຊົນກ່ອນ open()
- ອີກບາງຊົນທ້າຍ querySelectorAll()
- ກັບຄືນຊຸມຊົນທ້າຍ HTML DOM Documents
ການອະທິບາຍ ແລະ ການນໍາໃຊ້
querySelector() ວິທີການກັບຄືນກັບ CSS Selectorຄັ້ງທຳອິດປະກອດ
ສຳລັບການກັບຄືນ:ທັງໝົດການຕິດຕາມ (ບໍ່ແມ່ນພຽງພໍຫຼັງທີ່ພົບກັບການຕິດຕາມທຳອິດ), ກະທັ້ງຈະໃຊ້ querySelectorAll().
ຖ້າການເລື່ອງ CSS Selector ບໍ່ມີຜົນງານ: querySelector() ແລະ querySelectorAll() ຈະປະກາດ SYNTAX_ERR ຄວາມຜິດພາດ.
ບົດສະຫຼຸບ
ຄວາມນິຍົມ 1
ການເລື່ອງຫຼັງທີ່ <p> ຄັ້ງທຳອິດ:
document.querySelector("p");
ຄວາມນິຍົມ 2
ການເລື່ອງຫຼັງທີ່ປະເພດ "example":
document.querySelector(".example");
ຄວາມນິຍົມ 3
ການເລື່ອງຫຼັງທີ່ <p> ທີ່ມີປະເພດ "example":
document.querySelector("p.example");
ຄວາມນິຍົມ 4
ປ່ຽນຂໍ້ຄວາມຂອງປະກອບປະກອດ "demo":
document.querySelector("#demo").innerHTML = "Hello World!";
ຄວາມນິຍົມ 5
ເລື່ອງຫຼັງທີ່ <p> ທີ່ພົນພັນກັບ <div>:
document.querySelector("div > p");
ຄວາມນິຍົມ 6
ເລື່ອງຫຼັງທີ່ <a> ທີ່ມີຜົນງານ "target":
document.querySelector("a[target]");
ຄວາມນິຍົມ 7
ເລື່ອງຫຼັງທີ່ <h3> ຫຼື <h4> ຄັ້ງທຳອິດ:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
ຄວາມນິຍົມ 8
ເລື່ອງຫຼັງທີ່ <h3> ຫຼື <h4> ຄັ້ງທຳອິດ:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
ການອອກມະຕິ
document.querySelector(cssSelectors)
ພຽງພໍ
| ພຽງພໍ | ການອະທິບາຍ |
|---|---|
| cssSelectors |
ຈໍາຕະການ. ໜຶ່ງຫຼືຫຼາຍ CSS Selector. CSS Selector ທີ່ຕ້ອງການກັບ id, ປະເພດ, ຄວາມທີ່, ການຈັດວັດສະວະ, ຄວາມທີ່ຈັດວັດສະວະ ແລະ ອື່ນໆ ເພື່ອເລື່ອງພັດທະນາ HTML Element. ສຳລັບລາຍການທັງໝົດຈະເຂົ້າມາບ່ອນນັ້ນ ປຶ້ມການເລືອກຕັ້ງ CSS. ສຳລັບການເລືອກຫຼາຍເລື່ອງ CSS Selector ກະທັ້ງຈະໃຊ້ຄວາມສັບສົນ (ຄົ້ນຄວ້າຄູ່ມິດຂອງຂໍ້ຄວາມທີ່ສູງ). |
ການຖືກປະກາດ
| ປະເພດ | ການອະທິບາຍ |
|---|---|
| ໂອກາດ |
NodeList ທີ່ບັນຈຸບັນກັບປະກັບ CSS Selector. ຖ້າບໍ່ພົບກັບລະບົບທີ່ຕ້ອງການຈະຫຼັງຈາກ null。 |
ຄວາມແຕກຕ່າງລະບົບ HTMLCollection ແລະ NodeList
NodeList ແລະ HTMLcollection ຫຼາຍຄືກັນ.
ທັງສອງມີຄືນມູນຄ່າບັນດາບັນຊີ (ບັນດາບັນຊີ) ທີ່ຈາກແຜນ. ບັນດາບັນຊີສາມາດເຂົ້າເຖິງໄດ້ຜ່ານບັນຊີຂອງລາຍການ (ບັນຊີ). ບັນດາບັນຊີຈະເລີ່ມຈາກ 0.
ທັງສອງມີ length ບັນດາບັນຊີ, ທີ່ກັບຄືນມູນຄ່າຈຳນວນບັນດາບັນຊີໃນລາຍການ (ການລວມ).
HTMLCollection ແມ່ນບັນຊີແຜນ HTML.ການລວມ.
NodeList ແມ່ນບັນຊີແຜນ.ການລວມ (ບັນດາບັນຊີເຊື່ອມ, ບັນດາບັນຊີຄວາມຈະແບບ, ແລະ ບັນດາບັນຊີຄວາມຈະແບບ).
ບັນດາບັນຊີ HTMLCollection ສາມາດເຂົ້າເຖິງໄດ້ຜ່ານຊື່, id ຫຼື ບັນຊີຂອງພວກເຂົາ.
ບັນດາບັນຊີ NodeList ສາມາດເຂົ້າເຖິງໄດ້ຜ່ານຫົວໜ້າບັນຊີຂອງພວກເຂົາ.
HTMLCollection ຈະປອດໄພ.ສະຖານະທີ່ຈະປອດໄພ.ການລວມ.
ຕົວຢ່າງ: ຖ້າພວກເຈົ້າສະເໜີ <li> ແບບສະແນນໃນ DOM ສະໜາມ, ລາຍການ HTMLCollection ຈະປ່ຽນແປງ.
NodeList ເປັນສະຖານະທີ່ຈະປອດໄພ.ສະຖານະທີ່ຈະປອດໄພ.ການລວມ.
ຕົວຢ່າງ: ຖ້າພວກເຈົ້າສະເໜີ <li> ແບບສະແນນໃນ DOM ສະໜາມ, ລາຍການ NodeList ຈະບໍ່ປ່ຽນແປງ.
getElementsByClassName() ແລະ getElementsByTagName() ກົນລະຍຸດທັງໝົດຄືນເວລາ HTMLCollection.
querySelectorAll() ກົນລະຍຸດຄືນເວລາ NodeList.
childNodes ການກັບຄືນມູນຄ່າສະໄໝບັນຊີຄືນເວລາ.
ການສະໜັບສະໜູນບັນຊີບັນຊີ
document.querySelector() ເປັນຄວາມຜະສົມງານ DOM Level 1 (1998).
ທຸກສານຄົ້ນຫາໄດ້ສະໜັບສະໜູນມັນ:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| ສະໜັບສະໜູນ | 9-11 | ສະໜັບສະໜູນ | ສະໜັບສະໜູນ | ສະໜັບສະໜູນ | ສະໜັບສະໜູນ |
ປະເພດທີ່ກ່ຽວຂ້ອງ
ການສອນ:
ປຶ້ມການເລືອກຕັ້ງ HTML DOM NodeList
QuerySelector ກົນລະຍຸດ:
GetElement ກົນລະຍຸດ:
- ຄືນຊຸມຊົນກ່ອນ open()
- ອີກບາງຊົນທ້າຍ querySelectorAll()
- ກັບຄືນຊຸມຊົນທ້າຍ HTML DOM Documents
