HTML DOM NodeList item() ວິທີການ

ການກໍານົດ ແລະ ການນໍາໃຊ້

item() ວິທີກັບສະຖານະຂອງຫົວຂໍ້ທີ່ກໍານົດຢູ່ດ້ານຕໍ່າໃນ NodeList.

ມີສອງວິທີທີ່ສາມາດເຂົ້າເຖິງສະຖານະຂອງຫົວຂໍ້ທີ່ກໍານົດຢູ່ດ້ານຕອນຕໍ່າ:

list.item(ດັດສະນະການຂອງບັນດາຫລັກສູດໃນລາຍການ.)

ຫຼື

list[ດັດສະນະການຂອງບັນດາຫລັກສູດໃນລາຍການ.]

ວິທີທີ່ຫຼາຍທີ່ໃຊ້ຫຼາຍທີ່ສຸດແມ່ນ [ດັດສະນະການຂອງບັນດາຫລັກສູດໃນລາຍການ.]。

ພິມຂໍ້ມູນ

ຕົວຢ່າງ 1

ການຄົ້ນຫາສັບສິນຜູ້ບັນຈຸຂອງສັບສິນ <body>:

const nodeList = document.body.childNodes;

ທົດລອງດີຕະຫລອດ

ຕົວຢ່າງ 2

ການຄົ້ນຫາຊື່ຂອງສັບສິນຜູ້ບັນຈຸທຳອິດ:

const list = document.body.childNodes;
let name = list.item(0).nodeName;

ທົດລອງດີຕະຫລອດ

ຕົວຢ່າງ 3

ຜົນຂອງບົດບັນທຶກດຽວກັນ:

const list = document.body.childNodes;
let name = list[0].nodeName;

ທົດລອງດີຕະຫລອດ

ຕົວຢ່າງ 4

ການຄົ້ນຫາ HTML ຂອງສັບສິນ <p> ຄັ້ງທຳອິດໃນເອກະສານ:

const list = document.getElementsByTagName("p");
let text = list.item(0).innerHTML;

ທົດລອງດີຕະຫລອດ

ກໍານົດ 5

ການຮຽນການຄົ້ນພະຍານ HTML ຂອງຫລັກສູດ <p> ທີ່ທໍາອິດໃນ "myDIV":

const div = document.getElementById("myDIV");
const list = div.getElementsByTagName("p");
let text = list[0].innerHTML;

ທົດລອງດີຕະຫລອດ

ກໍານົດ 6

ການປ່ຽນ HTML ຂອງຫລັກສູດ <p> ທີ່ທໍາອິດໃນ "myDIV":

const div = document.getElementById("myDIV");
const list = div.getElementsByTagName("p");
let text = list[0].innerHTML = "Paragraph changed";

ທົດລອງດີຕະຫລອດ

ກໍານົດ 7

ການປ່ຽນສີຂອງທຸກປະກອບທີ່ class="child";

const list = document.querySelectorAll(".child");
for (let i = 0; i < list.length; i++) {
  list[i].style.color = "red";
}

ທົດລອງດີຕະຫລອດ

ຂອບຂອງພາສາ

nodelist.item(ດັດສະນະການຂອງບັນດາຫລັກສູດໃນລາຍການ.)

ຫລືອອກນອກຈາກ:

nodelist[ດັດສະນະການຂອງບັນດາຫລັກສູດໃນລາຍການ.]

ດັດສະນະການ

ດັດສະນະການ ການອະທິບາຍ
ດັດສະນະການຂອງບັນດາຫລັກສູດໃນລາຍການ.

ຕ້ອງການ

ບັນດາຫລັກສູດຈະທຳລາຍຕາມຊຸມນະພາບທີ່ພົບໃນເອກະສານ.

ດັດສະນະການທີ່ເລີ່ມຈາກ 0.

ການກັບຄືນ

ຊະນິດ ການອະທິບາຍ
ໂອກາດ ຈະຕັ້ງຂອບເຂດທີ່ກໍານົດຄັນກັບດັດສະນະການ.
null ຖ້າດັດສະນະການທີ່ບໍ່ຢູ່ໃນຂອບເຂດ.

ການສະໜັບສະໜູນທາງບຸກຄົນ

nodelist.item() ແມ່ນຖານ DOM Level 1 (1998) ປະສົມປະກອບ.

ທຸກພວກເຮົາເບິ່ງວ່າທຸກການຄົ້ນພະຍານທົ່ວທຸກພວກເຮົາໄດ້ສະໜັບສະໜູນຢູ່ບໍ່ມີການລົງຄະແນນສຽງ.

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ການສະໜັບສະໜູນ 9-11 ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ

ຫລັກສູນຂໍ້ມູນ

ປະສົມປະກອບ length

entries() ກົນລະບົບ

forEach() ກົນລະບົບ

keys() ກົນລະບົບ

values() ກົນລະບົບ

ອັນສັດ NodeList

childNodes() ກົນລະບົບ

querySelectorAll() ກົນລະບົບ

getElementsByName() ກົນລະບົບ