HTML DOM Element getElementsByClassName() ກົນລະຍຸດ

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

getElementsByClassName() ກົນລະຍຸດກັບຄືນກັບກຸ່ມປະກອບທີ່ມີຊື່ປະເພດວ່າຫນັງຄືນ, ເປັນ NodeList ວັດຖຸ.

ບໍ່ວ່າເປັນ:

ປະສົມປະສານ classList

ປະສົມປະສານ className

ກົນລະຍຸດ querySelector()

ກົນລະຍຸດ querySelectorAll()

ກົນລະຍຸດ getElementsByTagName()

HTML DOM Style Object

ວິຊາການ:

CSS 语法

CSS 选择器

CSS 选择器参考手册

NodeList

NodeList ເປັນກຸ່ມຕົວທີ່ຄ້າຍຄືກັບສະໝອງ (array).

ທ່ານສາມາດເຂົ້າເຖິງຕົວໃນລາຍການດ້ວຍບັນທາການ (index). ບັນທາການເລີ່ມຈາກ 0.

ປະສົມປະສານ lengthກັບຄືນຈຳນວນຂອງຕົວເປັນ.

ຄວາມຄິດຕົວ

ຕົວຢ່າງ 1

ປ່ຽນຂີ້ວິດທຳອິດຂອງລາຍການໃນ class="child":

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

ທ້າວທີ່ທ່ານຈະທົດລອງ

ຕົວຢ່າງ 2

ຈຳນວນປະກອບຂອງ class="child" ໃນ "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

ທ້າວທີ່ທ່ານຈະທົດລອງ

ຕົວຢ່າງ 3

ປ່ຽນຂະໜາດຂອງປະກອບອີກຄັ້ງຂອງ class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

ທ້າວທີ່ທ່ານຈະທົດລອງ

ຄວາມຈຳນວນ 4

ໃຊ້ "child" ແລະ "color" ຊື່ປະເພດໃນປະກອບສິນລະປະສັກທີ່ມີ class="example" ທີສອງທີ່ທີ່ປ່ຽນຂະໜາດຂອງປະກອບສິນລະປະສັກທີ່ທຳອິດ:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

ທ້າວທີ່ທ່ານຈະທົດລອງ

ຄວາມຈຳນວນ 5

ປ່ຽນສີຂອງປະກອບສິນລະປະສັກທີ່ class="child" ໃນ "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

ທ້າວທີ່ທ່ານຈະທົດລອງ

ກົດລະບຽບ

element.getElementsByClassName(classname)

ກົດລະບຽບ

ກົດລະບຽບ ການອະທິບາຍ
classname

ສະຖິຕິ. ຊື່ປະເພດຂອງລູກສິນລະປະສັກ.

ໃຊ້ອັກຄົວກັນດ້ວຍຈຳນວນ (ອີງຕາມ "child color").

ການກັບຄືນຄະແນນ

ປະເພດ ການອະທິບາຍ
NodeList

ປະກອບສິນລະປະສັກຂອງປະກອບສິນລະປະສັກທີ່ມີຊື່ປະເພດວັດຈຳນວນທີ່ລະບຸ.

ປະກອບສິນລະປະສັກຕາມລຳດັບທີ່ພວກເຂົາປະກົດຂຶ້ນໃນກະຊວງລະບົບແບບເລີ່ມຕົ້ນ.

ການສະໜັບສະໜູນສານຄົນ

element.getElementsByClassName() ເປັນລະບົບ DOM Level 1 (1998) ລະບົບ.

ທຸກສານຄົນພົບກັບມັນຢ່າງສົມບູນ:

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