ພຣັສກາຍ HTML DOM ລາຍການປ່ວງ

ບັນນາທິດ HTML DOM NodeList

NodeList ບັນນາທິດແມ່ນລາຍການຂອງຫຼັກສັບທີ່ເກັບມາຈາກເອກະສານ:

ບັນນາທິດ

ບັນນາທິດNL ແລະ ບັນນາທິດ HTMLCollection ເປັນອັນດຽວກັນ: NodeList ຖ້າໃຊ້

ວິທີກວດກາgetElementsByClassName() ທົ່ວໄປຫຼາຍເຄືອງໄດ້ຈັດສັບNL childNodes

ທົ່ວໄປຫຼາຍເຄືອງໄດ້ຈັດສັບNL querySelectorAll() ວິທີກວດກາບັນນາທິດNL

ລະບັບດັ່ງກ່າວນີ້ໄດ້ເລືອກຫຼັກສັບ <p> ທຸກຢ່າງໃນເອກະສານ:

ຕົວຢ່າງ

var myNodeList = document.querySelectorAll("p");

亲自试一试

ບັນນາທິດNL ສາມາດເຂົ້າຫາຫຼັກສັບຜ່ານບັນທາການລະບຸ:

ສຳລັບການເຂົ້າຫາຫຼັກສັບ <p> ຄັ້ງທີສອງ ທ່ານສາມາດຂຽນແບບນັ້ນ:

y = myNodeList[1];

ຄວາມຄິດ:ບັນທາການລະບຸຈາກ 0 ແຕ່.

ຄວາມຍາວຂອງ HTML DOM Node List

length ມັນອະທິບາຍມູນຄ່າຂອງບັນນາທິດໃນບັນນາທິດ:

ຕົວຢ່າງ

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

亲自试一试

ຄຳອະທິບາຍຕົວຢ່າງ:

  • ສ້າງລາຍການບັນນາທິດຂອງບັນນາທິດ <p> ທຸກຢ່າງ
  • ສະແດງມູນຄ່າຂອງບັນດາລາຍການນີ້

length ມັນມີຜົນປະໂຫຍດຫຼາຍໃນການພິສູດຫຼັກອົງການຂອງບັນນາທິດ:

ຕົວຢ່າງ

ປ່ຽນສະແດງຂອງບັນນາທິດ <p> ທຸກຢ່າງ:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

亲自试一试

HTMLCollection 与 NodeList 的区别

HTMLCollection（前一章）是 HTML 元素的集合。

NodeList 是文档节点的集合。

NodeList 和 HTML 集合几乎完全相同。

HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。

它们都有定义列表（集合）中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。

访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组！

节点数组看起来像数组，但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。