HTML DOM Document querySelectorAll() Method

Definition and usage

querySelectorAll() The method returns all elements that match the CSS selector.

querySelectorAll() The method returns NodeList.

If the selector is invalid querySelectorAll() The method will throw SYNTAX_ERR Exception.

Instance

Example 1

Select all elements with class="example":

document.querySelectorAll(".example");

Subukan nyo mismo

Example 2

Add background color to the first <p> element:

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

Subukan nyo mismo

Example 3

Add background color to the first <p> element with class="example":

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

Subukan nyo mismo

Example 4

Number of elements with class="example":

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

Subukan nyo mismo

Example 5

Set the background color of all elements with class="example":

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

Subukan nyo mismo

Halimbawa 6

I-set ang kulay ng paglalakas ng lahat ng <p> elemento:

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

Subukan nyo mismo

Halimbawa 7

I-set ang border ng lahat ng <a> elemento na gumagamit ng attribute na "target":

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

Subukan nyo mismo

Halimbawa 8

I-set ang kulay ng paglalakas ng bawat <p> elemento na mayroon siyang magulang na <div> elemento:

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

Subukan nyo mismo

Halimbawa 9

I-set ang kulay ng paglalakas ng lahat ng <h3>, <div>, at <span> elemento:

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

Subukan nyo mismo

Gramata

document.querySelectorAll(CSSselectors)

Parametro

Parametro Paglalarawan
CSSselectors

Dapat ibigay. Isang o maraming CSS selector.

Ang CSS selector ay pinili ang mga HTML elemento base sa id, klase, uri, attribute, at halaga ng attribute.

Para sa kumpletong listahan, bisitahin nyo ang aming CSS Selector Reference Manual.

Para sa maraming selector, gamitin ang kumong para sa bawat selector (tingnan ang halimbawa sa itaas).

Pagbabalik na halaga

Uri Paglalarawan
Objekto

Ang NodeList object na may mga elemento na tumutugma sa CSS selector.

Kung walang matagpuan na katugma, ibabalik ang walang laman na NodeList object.

Pagkakaiba ng HTMLCollection at NodeList

NodeList at HTMLcollection Napakatulad.

Parehong mula sa mga nakaextract na nodong (elemento) ng dokumento, isang katulad na collection (listahan) ng array. Maaaring abutin ang mga nodong ito sa pamamagitan ng index na numero (subindex). Ang index ay nagsisimula sa 0.

Parehong mayroon silang length ang pagbibigay ng bilang ng mga elemento sa listahan (koleksyon).

HTMLCollection ayAng elemento ng dokumentona koleksyon.

Ang NodeList ayNode na dokumentona koleksyon ng (node, attribute at text na node).

Ang mga item ng HTMLCollection ay maaaring akses sa pamamagitan ng kanilang pangalan, id o index na numero.

Ang mga item ng NodeList ay maaring akses sa pamamagitan ng kanilang index na numero lamang.

Ang HTMLCollection palaging ayReal-timena koleksyon.

Halimbawa: Kung idadagdag ang <li> na elemento sa listahan ng DOM, ang listahan sa HTMLCollection ay magbabago din.

Ang NodeList ay karaniwangStaticna koleksyon.

Halimbawa: Kung idadagdag ang <li> na elemento sa listahan ng DOM, ang listahan sa NodeList ay hindi magbabago.

getElementsByClassName() at getElementsByTagName() Ang lahat ng mga paraan ay ibibigay bilang real-time HTMLCollection.

querySelectorAll() Ang mga paraan ay ibibigay bilang static NodeList.

childNodes Ang mga katangian ay ibibigay bilang real-time NodeList.

Suporta ng Browser

document.querySelectorAll() Ito ay DOM Level 3 (2004) na katangian.

Ang lahat ng mga browser ay sumusuporta sa ito:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporta 9-11 Suporta Suporta Suporta Suporta

Mga Nagkakasabay na Pahina

Tuturuan:

CSS Selector

CSS Selector Reference Manual

Tuturuan sa JavaScript NodeList

QuerySelector Method:

Mga Tago sa Element querySelector()

Mga Tago sa Element querySelectorAll()

Mga Tago sa Document querySelector()

Mga Tago sa Document querySelectorAll()

GetElement Method:

Mga Tago sa Document getElementById()

Mga Tago sa Document getElementsByTagName()

Mga Tago sa Document getElementsByClassName()