ການຊອກຫາຫຼັກສະນະ DOM Element querySelector()

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

querySelectorAll() 方法ຈະກັບຄືນລູກທີ່ຕິດຕາມ CSS 选择器ທີ່ຕິດຕາມປະກອບ.

ຄຳເຕືອນ:

querySelectorAll() 方法ຈະກັບຄືນປະກອບທຳອິດທີ່ຕິດຕາມຄູ່ຄົນເລືອກ. ເພື່ອກັບຄືນທັງໝົດຈະໃຊ້ querySelectorAll() 方法.

ບໍ່ມີຫົວຂໍ້ອື່ນໃດ

ຊື່ວະພິດ:

classList 属性

className 属性

querySelectorAll() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

ໂອວເຈັນ DOM Style

ການສອນ:

ການອະທິບາຍພາສາ CSS

ການເລືອກຄວາມພິການ CSS

ປືກສາພາສາ CSS

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ປ່ຽນຂໍ້ຄວາມຂອງປະກອບທີ່ເປັນລູກຂອງ <div> ທີ່ class="example":

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

ທົດລອງດ້ວຍຕົວເອງ

ມີຕົວຢ່າງຫຼາຍກວ່າຢູ່ໃນບົດຢູ່ດ້ານກ້າວລຸ່ມ.

ກົດລະບຽບ

element.querySelector(CSSselectors)

ປະເພດ

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

ສຳຄັນ。ສາຍ. ກໍານົດ id ຫຼື ຫຼາຍຫຼາຍ CSS 选择er ເພື່ອຕິດຕາມປະກອບ.

CSS 选择器ຈະເລືອກປະກອບ HTML ອີງຕາມ id、class、ຊະນິດ、ຄວາມຜົນງານວັດຖຸຫຼັກຂອງຄວາມຜົນງານວັດຖຸຫຼັກ ແລະ ອັນດັບຄວາມຜົນງານ.

ສຳລັບຄູ່ຄົນເລືອກຫຼາຍຫຼາຍຈະແບ່ງຕັ້ງດ້ວຍຄຳແນະນຳ.

ປະກອບທີ່ກັບຄືນຈະຕິດຕາມປະກອບທຳອິດທີ່ພົບໃນເອກະສານ (ບອກກັບ "ຕົວຢ່າງຫຼາຍກວ່າ" ໃນລາຍລະອຽດ).

ຄຳເຕືອນ：ເພື່ອມູນນິທິ CSS 选择器ທັງໝົດຈະເບິ່ງພວກມັນຢູ່ ປືກສາພາສາ CSS.

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

ຄືນຄືນທີ່ກັບຄືນ:

ພົບປະກອບທຳອິດທີ່ຕິດຕາມ CSS 选择器.

ຖ້າບໍ່ພົບພັງສົງຂອງຄວາມຄົ້ນຫາຈະຖືກກັບຄືນຄື null.

ຖ້າຄູ່ຄົນເລືອກບໍ່ມີຜົນກະທົບແລ້ວຈະປ່ອຍຂໍ້ບັນຫາ SYNTAX_ERR.
DOM 版本： Selectors Level 1 Element Object

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

ຕົວຢ່າງ 2

ປ່ຽນຂໍ້ຄວາມຂອງປະກອບ <p> ທຳອິດໃນ <div>:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

ທົດລອງດ້ວຍຕົວເອງ

ຕົວຢ່າງ 3

ປ່ຽນຂໍ້ຄວາມຂອງປະກອບ <p> ທີ່ class="example" ທຳອິດ:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

ທົດລອງດ້ວຍຕົວເອງ

ຕົວຢ່າງ 4

ປ່ຽນຂໍ້ຄວາມຂອງປະກອບ <div> ທີ່ id="demo":

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

ທົດລອງດ້ວຍຕົວເອງ

例子 5

为

元素内设置 target 属性的第一个 元素添加红色边框：

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

ທົດລອງດ້ວຍຕົວເອງ

例子 6

此例演示多个选择器是如何工作的。

假设您有两个元素：

和

元素。

以下代码将为

中的第一个

元素添加背景颜色：

<div id="myDIV">
  <h2>A h2 element</h2>
  <h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

ທົດລອງດ້ວຍຕົວເອງ

例子 7

但是，如果

中的

元素放置在

元素之前。

元素将获得红色背景色。

<div id="myDIV">
  <h3>A h3 element</h3>
  <h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

ທົດລອງດ້ວຍຕົວເອງ

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

ຈຳນວນທີ່ໃນຕາຕະລາງທີ່ເວົ້າວ່າສະເໜີການສະໜັບສະໜູນຄັບຄຸມທີ່ສົມບູນຂອງການສະໜັບສະໜູນຄັບຄຸມທີ່ສົມບູນທີ່ສົມບູນ.

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

ບັນດາຫົວຂໍ້ທີ່ກ່ຽວຂ້ອງ

ການສຶກສາ CSS:ການເລືອກຄວາມພິການ CSS

ສາຍຊີວິດ CSS:ປືກສາພາສາ CSS

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

ສາຍຊີວິດ JavaScript:document.querySelector()

ສາຍຊີວິດ JavaScript:element.querySelectorAll()

ສາຍຊີວິດ HTML DOM:document.querySelectorAll()