ກົດລະບຽບ querySelectorAll() HTML DOM Document

  • ກ່ອນການໜ້ານີ້
  • ຫລັງການໜ້ານີ້
  • ກັບຄືນອັບສັດທີ່ກ່າວ ເທຣມ HTML DOM Documents

ການອະທິບາຍແລະການນໍາໃຊ້

querySelectorAll() ວິທີກຳລັງຈະກັບຄືນປະເພດທີ່ມີຄວາມສົມພາບກັບ CSS selector。

querySelectorAll() ວິທີກຳລັງຈະກັບຄືນ NodeList。

ຖ້າຄວາມເລືອກບໍ່ມີຜົນ querySelectorAll() ວິທີກຳລັງຈະປາກະປາຍ SYNTAX_ERR ຄວາມຜິດພາດ

ຄວາມປະເພດ

ຄວາມປະໂຫຍດ 1

ເລືອກປະເພດທີ່ມີ class="example":

document.querySelectorAll(".example");

亲自试一试

ຄວາມປະໂຫຍດ 2

ແຕ່ງສີຫຼັງໃຫ້ <p> ຄັ້ງທຳອິດ:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

亲自试一试

ຄວາມປະໂຫຍດ 3

ແຕ່ງສີຫຼັງໃຫ້ປະເພດ <p> class="example" ຄັ້ງທຳອິດ:

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

亲自试一试

ຄວາມປະໂຫຍດ 4

ຈຳນວນປະເພດ class="example":

let numb = document.querySelectorAll(".example").length;

亲自试一试

ຄວາມປະໂຫຍດ 5

ແຕ່ງສະແດງສີຫຼັງໃຫ້ປະເພດ class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

亲自试一试

例子 6

设置所有

元素的背景颜色：

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

亲自试一试

例子 7

设置所有使用 "target" 属性的 元素的边框：

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

亲自试一试

例子 8

设置父元素是

元素的每个

元素的背景颜色：

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

亲自试一试

例子 9

设置所有

、
和 元素的背景颜色：

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

亲自试一试

语法

document.querySelectorAll(CSSselectors)

参数

参数 描述
CSSselectors

必需。一个或多个 CSS 选择器。

CSS 选择器根据 id、类、类型、属性、属性值等选择 HTML 元素。

如需完整列表，请访问我们的 ຄູ່ມືເລື່ອງຄູ່ຄັດ CSS。

对于多个选择器，请用逗号分隔每个选择器（请参阅上方的实例）。

返回值

类型 描述
对象

含有与 CSS 选择器匹配的元素的 NodeList 对象。

如果没有找到匹配项，则返回空的 NodeList 对象。

HTMLCollection 和 NodeList 的区别

NodeList ແລະ HTMLcollection 非常相似。

两者都是从文档中提取的节点（元素）的类似数组的集合（列表）。可以通过索引号（下标）访问节点。索引从 0 开始。

ທັງສອງມີ length ປະເພດທີ່ກັບຄືນຄືນຄືນແມ່ນຈຳນວນຂອງຫຼັກສະນະຂອງລາຍການ (ຈຳນວນ)。

HTMLCollection ແມ່ນຕົວລະຄອນແຫ່ງໂຄດການກວມ.

NodeList ເປັນ:ຕົວລະຄອນແຫ່ງໜັງຂອງ (ຕົວລະຄອນຫຼັກ, ຕົວລະຄອນຜົນສັນຍາ, ແລະ ຕົວລະຄອນຄວາມຕໍ່າ).

ຫລັກການສະໜາມ HTMLCollection ຈະສາມາດເຂົ້າເຖິງພວກເຂົາທີ່ຜ່ານຊື່, id ຫລື ບ່ອນທີ່ຫລັງ.

ຫລັກການສະໜາມ NodeList ຈະສາມາດເຂົ້າເຖິງຜູ້ມາດິນຂອງພວກເຂົາທີ່ຜ່ານບ່ອນທີ່ຫລັງ.

HTMLCollection ຈະເປັນ.ເປັນຄືວ່າ.ການກວມ.

ຕົວຢ່າງ: ຖ້າການເພີ່ມ <li> ແມ່ນມີໃນລາຍການ DOM, HTMLCollection ຂອງລາຍການຈະປ່ຽນແປງ.

NodeList ຈະເປັນ.ຄືວ່າ.ການກວມ.

ຕົວຢ່າງ: ຖ້າການເພີ່ມ <li> ແມ່ນມີໃນລາຍການ DOM, NodeList ຂອງລາຍການຈະບໍ່ປ່ຽນແປງ.

getElementsByClassName() ແລະ getElementsByTagName() ວິທີກັບຄືນມາທັງໝົດກັບ HTMLCollection.

querySelectorAll() ການເອົາມາຂອງວິທີກວມເປັນ NodeList ຄືວ່າ.

childNodes ພາລະຄວາມທີ່ກັບຄືນມາອາດມີຄວາມສະເລ່ຍທັງໝົດ.

ການສະໜັບສະໜູນບັນຍາຍ

document.querySelectorAll() ເປັນລັກສະນະ DOM Level 3 (2004).

ທຸກພາສາບັນຍາຍທັງໝົດສາມາດນຳໃຊ້ມັນໄດ້:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ການສະໜັບສະໜູນ 9-11 ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ
  • ກ່ອນການໜ້ານີ້
  • ຫລັງການໜ້ານີ້
  • ກັບຄືນອັບສັດທີ່ກ່າວ ເທຣມ HTML DOM Documents