ການຊອກຫາຫລັກສັບ HTML DOM Element querySelectorAll()

定义和用法

Definition and usage querySelectorAll()

Method returns a collection of child elements that match the specified CSS selector, as a static NodeList object.

NodeList

NodeList is a node collection (list) that is similar to an array.

Nodes in the list can be accessed by index (index). Index starts from 0.

length attribute can return the number of nodes in the list.

Please see also:

Reference manual:

classList attribute

className attribute

querySelector() method

getElementsByTagName() method

HTML DOM Style Object

getElementsByClassName() method

ພາສາ CSS

CSS Selector

CSS Selector Reference Manual

ການສອນ:

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ການກະກຽມ ບັນດາສະມາຊິກ ທີ່ class="example" ຄັ້ງທຳອິດໃນ element <div> ທີ່ class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// ການຄົ້ນຫາ element ທີ່ id="myDIV" (div) ແລະ ການຄົ້ນຫາ ບັນດາ element ທີ່ class="example" ທາງກັບ div
x[0].style.backgroundColor = "red";

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

ຄຳແນະນຳ:// ການກະກຽມ ບັນດາສະມາຊິກ ທີ່ class="example" (index 0) ໃນ div ທີ່ class="example"

ຫຼາຍຕົວຢ່າງທີ່ມີຢູ່ບ່ອນດ້ານກ້ອງຂອງເວັບໄຊ

SyntaxelementcssSelectors.querySelectorAll(

)

) ການອະທິບາຍ
cssSelectors

ຕ້ອງການ. ຄວາມສັບສົນ. ກຳນົດ ຄວາມສັບສົນ CSS selector ທີ່ຈະຕິດຕໍ່ກັບ element

CSS selector ຂອງເປັນການເລືອກ HTML element ອີງຕາມ id, class, ແບບ, attribute, ຄວາມຄິດຂອງ attribute ເພື່ອການເລືອກ

ສຳລັບ selector ຫຼາຍຫຼາຍ ການແຍກແຍງດ້ວຍຄຳແນະນຳ

ຄຳແນະນຳ:ສະແດງບັນດາ selector CSS ທັງໝົດ ກະລຸນາເບິ່ງທີ່ CSS Selector Reference Manual.

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄຳຕອບກັບ:

NodeList ອອກສະແດງບັນດາສະມາຊິກພັນລະດັບຫຼັງທີ່ຕິດຕໍ່ກັບ selector CSS

NodeList ກໍາລັງການຄົ້ນຫາສະເພາະ ມີຄວາມສະຫງົບ ເຊິ່ງໝາຍຄວາມວ່າ ການປ່ຽນແປງໃນ DOM ຈະບໍ່ມີຜົນຕໍ່ກັບຄວາມສະເພາະ

ຄໍາເຫັນ:ຖ້າ selector ທີ່ກຳນົດບໍ່ມີຜົນ ຈະປ່ອຍອອກສິ່ງຂໍ້ຄວາມ SYNTAX_ERR
DOM Version: Selectors Level 1 Document Object

ຕົວຢ່າງຫຼາຍກວ່າ

ຕົວຢ່າງ 2

ການຄົ້ນຫາ <div> ທຸກ <p> ສະມາຊິກ ແລະ ການກະກຽມ ບັນດາສະມາຊິກ <p> ຄັ້ງທຳອິດ (index 0) ທີ່ class="example"

// ຊອກຫາປະກອບ id="myDIV" (div) ແລະ ໃຫ້ປະກອບ div ມີປະກອບ p ທີ່ຢູ່ໃນມັນ
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// ການກະກຽມ ບັນດາສະມາຊິກ <p> ຄັ້ງທຳອິດໃນ div (index 0) ທີ່ class="example"
x[0].style.backgroundColor = "red";

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

ຕົວຢ່າງ 3

ການຄົ້ນຫາ <div> ທີ່ class="example" ທຸກ <p> ສະມາຊິກ ແລະ ການກະກຽມ ບໍລິເວນຫຼັງຂອງ <p> ຄັ້ງທຳອິດ:

// ຊອກຫາປະກອບ id="myDIV" (div) ແລະ ໃຫ້ປະກອບ div ມີປະກອບ p ທີ່ມີ class="example"
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// ກະຈາຍສີຫຼັງການສະແດງຂອງປະກອບ p ທີ່ມີ class="example" (index 0)
x[0].style.backgroundColor = "red";

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

ຕົວຢ່າງ 4

ຄົ້ນຫາຈຳນວນປະກອບ ທີ່ມີ class="example" ທີ່ຢູ່ໃນປະກອບ <div> (ນຳໃຊ້ປະສົມປະເພດ NodeList)

/* ຊອກຫາປະກອບ id="myDIV" (div) ແລະ ໃຫ້ປະກອບ div ມີປະກອບ class="example" ທີ່ຢູ່ໃນມັນ p, ກັບຄຳຕອບວ່າຈຳນວນປະກອບ */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

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

ຕົວຢ່າງ 5

ການກະຈາຍສີຫຼັງການສະແດງຂອງປະກອບ class="example" ທີ່ຢູ່ໃນ <div>

// ຊອກຫາປະກອບ id="myDIV" (div) ແລະ ໃຫ້ປະກອບ div ມີປະກອບ class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// ສ້າງວົງວຽນ for ແລະ ກະຈາຍສີຫຼັງການສະແດງຂອງປະກອບ class="example" ທີ່ຢູ່ໃນ div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

ຕົວຢ່າງ 6

ການກະຈາຍສີຫຼັງການສະແດງຂອງປະກອບ <p> ທີ່ຢູ່ໃນ <div>

// ຊອກຫາປະກອບ id="myDIV" (div) ແລະ ໃຫ້ປະກອບ div ມີປະກອບ p ທີ່ຢູ່ໃນມັນ
var x = document.getElementById("myDIV").querySelectorAll("p");
// ສ້າງວົງວຽນ for ແລະ ກະຈາຍສີຫຼັງການສະແດງຂອງປະກອບ p ທີ່ຢູ່ໃນ div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

ຕົວຢ່າງ 7

ການກະຈາຍຮູບແບບຂໍ້ຄວາມຂອງປະກອບ <div> ທີ່ມີປະເພດ target

// ຊອກຫາປະກອບບົດ id="myDIV" (div) ແລະ ໃຫ້ປະກອບ div ມີປະສົມປະເພດ target
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// ສ້າງການອອກສາຍ for ແລະຈັດຕັ້ງການເຂົ້າຂອງປະກອບ <a> ທັງໝົດທີ່ມີລະບຽບ target.
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

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

ຕົວຢ່າງ 8

ຈັດຕັ້ງສີທີ່ຫຼັງຂອງປະກອບ <div> ທັງໝົດ <h2>, <div> ແລະ <span>:

// ການກວດຄົ້ນສິ່ງ id="myDIV" ແລະການກວດຄົ້ນປະກອບ <h2>, <div> ແລະ <span> ທັງໝົດໃນ <div>.
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// ສ້າງການອອກສາຍ for ແລະຈັດຕັ້ງສີທີ່ຫຼັງຂອງປະກອບ <div> ທັງໝົດ <h2>, <div> ແລະ <span>.
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

ການສະໜັບສະໜູນບັນດາສາຍວິທະຍາ

ຈຳນວນໃນຕາລະບັນທຶງອອກສະຖານີບໍ່ຖືກຕ້ອງຂອງການສະໜັບສະໜູນການນຳໃຊ້ຂອງສາຍວິທະຍານັ້ນ.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

ຄໍາເຫັນ:Internet Explorer 8 ສະໜັບສະໜູນ CSS2 selector. IE9 ແລະຫຼັງກັນຍັງສະໜັບສະໜູນ CSS3.

ບັນດາຫົວຫຼັງກ່ຽວກັບ

ການສຶກສາ CSS:CSS Selector

ສາຍວິທະຍາ CSS:CSS Selector Reference Manual

ການສຶກສາ JavaScript:JavaScript HTML DOM Node List

ສາຍວິທະຍາ JavaScript:element.querySelector()

ສາຍວິທະຍາ HTML DOM:document.querySelectorAll()