ຄູ່ມູນວິທະຍາສາດ HTML DOMTokenList

  • ຫົວໜ້າບ່ອນໜ້າໜ້າໜ້າຫຼັງ HTML NodeList
  • ຫົວໜ້າບ່ອນໜ້າໜ້າຫຼັງ HTML Style

DOMTokenList

DOMTokenList ຄືກັບກຸ່ມສິບຄະແນນແບບຖອຍຖານ

ສາມາດເຂົ້າເຖິງ DOMTokenList ຜ່ານບັນນາທິການ (ເລີ່ມຈາກ 0)

ປະກອບປະກອບ lengthກັບຄືນຈຳນວນສິບຄະແນນໃນ DOMTokenList

ສົນທະນາ:ສະຖານທີ່ HTML ປະກອບປະກອບ classListສະຕິດ DOMTokenList

ປະກອບປະກອບວິທະຍາສາດ DOMTokenList ແລະ ກົນລະບຽບ

ຊື່ ການອະທິບາຍ
add() ເພີ່ມສິບຄະແນນຫຼາຍຫຼຽນລວມຫນຶ່ງເຫຼືອ
contains() ຖ້າລາຍການມີປະເພດອາສະຍາກຳ ກັບຄືນ true
entries() ກັບຄືນອີງຕາມພະຫັດ/ຄູ່ມູນສະເພາະສະເພາະກວງງາຍ
forEach() ການດຳເນີນວິທີກັບສັນທຸກຄົນໃນລາຍການ.
item() ການຄົ້ນຫາສັນທີ່ຢູ່ໃນບ່ອນທີ່ຢູ່ຂອງບັນທຶກສັນ.
keys() ການຄົ້ນຫາບັນທຶກສັນໃນລາຍການ.
length ການຄົ້ນຫາຈຳນວນສັນໃນລາຍການ.
remove() ການລຶບສັນຈຳນວນຫຼາຍຈາກລາຍການ.
replace() ການປ່ຽນສັນໃນລາຍການ.
supports() ການກັບຄືນຄືວ່າສັນສະໜັບສະໜູນປະກອບສັນ.
toggle() ການປ່ຽນກັນບັນທຶກສັນໃນລາຍການ.
value ການຄົ້ນຫາລາຍການສັນໃຫ້ເປັນຄຳເວົ້າ.
values() ການຄົ້ນຫາອາກາດທີ່ມີຄູ່ໃນລາຍການ:

ຄວາມຈິງ

ຕົວຢ່າງ 1

ການເພີ່ມ "myStyle" ທີ່ຢູ່ໃນປະກອບສັນ:

element.classList.add("myStyle");

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 2

ການລຶບ "myStyle" ຈາກປະກອບສັນ:

element.classList.remove("myStyle");

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 3

ການເປີດແລະປິດ "myStyle":

element.classList.toggle("myStyle");

ທ້າທາຍພວກເຈົ້າເອງ

ມີຕົວຢ່າງຫຼາຍອີກໃນບໍລິເວນລຸ່ມ.

ບໍ່ແມ່ນອາງານ

DOMTokenList ບໍ່ແມ່ນອາງານ!

DOMTokenList ຄືກັບອາງານແຕ່ບໍ່ແມ່ນອາງານ.

ທ່ານສາມາດການເສັງການພາຍໃນ DOMTokenList ເພື່ອໃຊ້ບັນທຶກສັນທີ່ຢູ່ໃນບ່ອນທີ່ຢູ່.

ແຕ່ບໍ່ສາມາດໃຊ້ວິທີຂອງອາງານທີ່ຢູ່ໃນ DOMTokenList ເຊັ່ນ push()、pop() ຫຼື join()。

ຄວາມຈິງ

ຕົວຢ່າງ 1

ການເພີ່ມຊະນິດຈຳນວນຫຼາຍໃຫ້ປະກອບສັນ:

element.classList.add("myStyle", "anotherClass", "thirdClass");

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 2

ການລຶບຊະນິດຈຳນວນຫຼາຍຈາກປະກອບສັນ:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 3

ການຄົ້ນຫາຈຳນວນຊະນິດຄູ່ຂອງປະກອບສັນ:

let numb = element.classList.length;

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 4

ການຄົ້ນຫາຊະນິດຄູ່ "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 5

ຮຽກຮ້ອງປະເພດທໍາອິດຂອງບັນຊີ:

let className = element.classList.item(0);

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 6

ບັນຊີມີປະເພດ "myStyle" ຫຼືບໍ່?

let x = element.classList.contains("myStyle");

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 7

ຖ້າບັນຊີມີປະເພດ "myStyle" ຈະລຶບ "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 8

ປ່ຽນປະເພດລະຫວ່າງທີ່ຈະສ້າງບັນຊີຫົວຫຼີ້ນລົງ

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

ທ້າທາຍພວກເຈົ້າເອງ

ຕົວຢ່າງ 9

ສ້າງບັນຊີນຳທີ່ຢືນຢັນ

// ຮຽກຮ້ອງບັນຊີນຳ
const navbar = document.getElementById("navbar");
// ຮຽກຮ້ອງການກັບບັນຊີນຳ
const sticky = navbar.offsetTop;
// ເມື່ອທ່ານໄດ້ມາທີ່ການສັບສົມໃຫ້ລົງມາຈະເພີ່ມປະເພດ "sticky" ໃຫ້ແກ່ບັນຊີນຳ
// ລຶບລົງທີ່ການສັບສົມໃຫ້ລົງມາ
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

ທ້າທາຍພວກເຈົ້າເອງ

  • ຫົວໜ້າບ່ອນໜ້າໜ້າໜ້າຫຼັງ HTML NodeList
  • ຫົວໜ້າບ່ອນໜ້າໜ້າຫຼັງ HTML Style