HTML DOM Element querySelectorAll() 方法

Ding yi he yong fa

querySelectorAll() Fang fa hui fan yu zhi ding CSS xuanshuo he pei he de yuansu de zi yuansu de ju he, yi jing tai NodeList yuansu.

NodeList

NodeList shi lei shu de jie dian ju he (lie biao).

Lie biao zhong de jie dian ke tong guo su xiang (xia biao) guan ji. Su xiang cong 0 kaishi.

length shi xing ke hui fan lie biao zhong de jie dian shu.

Ling qing can jia:

Can kao shou ce:

classList shi xing

className shi xing

querySelector() fang fa

getElementsByTagName() fang fa

getElementsByClassName() fang fa

Obhajon HTML DOM Style

Jiao cheng:

CSS ƙanam

CSS ƙayyada

CSS ƙayyada ƙirki

Shi li

Li zhi 1

Shezhi <div> yuansu zhong class="example" de diyi ge yuansu de bei jing se liang:

// Gyaran id="myDIV" de yuansu (div), ran hou gyaran div zhong class="example" de suo you yuansu
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Shezhi div zhong diyi <p> element (index 0) de bei jing se liang
x[0].style.backgroundColor = "red";

جرب بنفسك

Ti shi:Yan zhuan xia fen gong xian geng duo shi li.

Yan fa

element.querySelectorAll(cssSelectors)

Can shu

Can shu Miao shu
cssSelectors

Bi xu. Zi fu chuan. Gui ding yi ge huo duo ge CSS xuanshuo lai pei he yuansu.

CSS xuanshuo he shi yong yu gen ju id、lei xing、shi xing、suo you xing、suo you xing zhi jia yu shi xuan ze HTML yuansu.

Dui yu duo ge xuanshuo, yong jiao hao fen ge mei ge xuanshuo.

Ti shi:Guan yu suo you CSS xuanshuo de lie biao, qing cha kan women de CSS ƙayyada ƙirki。

Ji shu xiang xi

Hui fan zhi:

NodeList yuansu, biao shi yu zhi ding CSS xuanshuo he pei he de dui ran yuansu de suo you hou dai yuansu.

NodeList shi jing tai de ju he, zhi yi shi DOM zhong de gai bian dui ju he mei you ying xiang.

ملاحظة:Ruguo zhi ding de xuanshuo shi wu xiao de, zen shi bao chu SYNTAX_ERR yi chang
DOM ban ben: Selectors Level 1 Document Object

Geng duo shi li

Li zhi 2

Gyaran <div> yuansu nei de all <p> yuansu, bai shi diyi <p> yuansu (suo you 0) de bei jing se liang:

// girmi abin da ke id="myDIV" kiki (div), kuma girmi abin da ke div da kuma sabonin p
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Shezhi div zhong diyi <p> element (suo you 0) de bei jing se liang
x[0].style.backgroundColor = "red";

جرب بنفسك

Li zhi 3

Gyaran <div> class="example" ka na all <p> element, bai shi diyi <p> element de bei jing:

// girmi abin da ke id="myDIV" kiki (div), kuma girmi abin da ke div da kuma sabonin class="example" sabonin p
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// aja sabonin da ke div da kuma sabonin class="example" sabonin p (index 0) sabonin:
x[0].style.backgroundColor = "red";

جرب بنفسك

masu kai 4

A girmi kwanan sabonin da ke <div> sabonin class="example" sabonin (a girmi NodeList sabonin length sabonin):

/* girmi abin da ke id="myDIV" kiki (div), kuma girmi abin da ke div da kuma sabonin class="example" sabonin p, a girmi kwanan abin da a rafuwa */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

جرب بنفسك

masu kai 5

Aja sabonin da ke <div> sabonin class="example" sabonin kai tsaye sabonin sabonin:

// girmi abin da ke id="myDIV" kiki (div), kuma girmi abin da ke div da kuma sabonin class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// girmi for girmi kuma aja sabonin da ke div da kuma sabonin class="example"
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

جرب بنفسك

masu kai 6

Aja sabonin da ke <div> sabonin kai tsaye sabonin p:

// girmi abin da ke id="myDIV" kiki (div), kuma girmi abin da ke div da kuma sabonin p
var x = document.getElementById("myDIV").querySelectorAll("p");
// girmi for girmi kuma aja sabonin da ke div da kuma sabonin p
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

جرب بنفسك

masu kai 7

Aja abin da ke <div> sabonin kai tsaye abin da ke da sabonin target:

// girmi abin da id="myDIV" kiki (div), kuma girmi abin da ke div da kuma girmi kwanan <a> da ke da "target" sabonin
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// إنشاء حلقة for واستخدام الحدود في div لجميع عناصر <a> التي تحتوي على خاصية target
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

جرب بنفسك

مثال 8

تعيين لون الخلفية لجميع عناصر <h2>،<div> و<span> في <div>:

// الحصول على العنصر الذي يحمل id="myDIV" (div) ثم الحصول على جميع عناصر <h2>،<div> و<span> داخل <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// إنشاء حلقة for واستخدام لون الخلفية لجميع عناصر <h2>،<div> و<span> في <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

جرب بنفسك

دعم المتصفحات

أرقام الجدول تشير إلى إصدار المتصفح الأول الذي يدعم هذه الطريقة بالكامل.

كروم إدج فايرفوكس سفاري أوبرا
كروم إدج فايرفوكس سفاري أوبرا
4.0 9.0 3.5 3.2 10.0

ملاحظة:يدعم متصفح إنترنت إكسبلورر 8 ميزات CSS2 المختارة. يدعم إصدارات IE9 وأحدثها CSS3.

الصفحات ذات الصلة

دليل تعليمات CSS:CSS ƙayyada

دليل مرجع CSS:CSS ƙayyada ƙirki

دليل تعليمات جافا سكريبت:قائمة جافا سكريبت HTML DOM

دليل مرجع جافا سكريبت:element.querySelector()

دليل مرجع HTML DOM:document.querySelectorAll()