Method ya querySelectorAll() ya Document ya HTML DOM

Mifano na Matumizi

querySelectorAll() Method inaona kila kifaa ambacho kina chaguo cha kuchagua cha CSS.

querySelectorAll() Method inaona NodeList.

kama chaguo cha kuchagua cha bila ya maana: querySelectorAll() Method inaeleza SYNTAX_ERR Kabla ya kutokea kwa uharibifu.

Mfano

Mfano 1

Chaguo zote za kina class="example":

document.querySelectorAll(".example");

Mtaarifu wa juu

Mfano 2

Ongea rangi ya mbali ya kipimo cha kwanza kina <p>:

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

Mtaarifu wa juu

Mfano 3

Ongea rangi ya mbali ya kipimo cha kwanza kina class="example":

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

Mtaarifu wa juu

Mfano 4

Jumla ya kifaa kina class="example":

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

Mtaarifu wa juu

Mfano 5

Kufungua rangi ya wengi wa kifaa ambayo kina class="example":

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

Mtaarifu wa juu

Mtaarifu 6

Kuingiza mabara ya kina ya vingi vya <p>.

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

Mtaarifu wa juu

Mtaarifu 7

Kuingiza mabara ya kina ya kila kina cha <a> yenye property ya "target".

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

Mtaarifu wa juu

Mtaarifu 8

Kuingiza mabara ya kina ya p ya kila kina cha <div>.

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

Mtaarifu wa juu

Mtaarifu 9

Kuingiza mabara ya mbili ya kina ya vingi vya <h3>, <div> na <span>.

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

Mtaarifu wa juu

Inasaidia kufikia

document.querySelectorAll(CSSselectors)

Matumizi ya kifungo

Matumizi ya kifungo Kuelewa
CSSselectors

Inahitajika. Kifungo cha CSS kimoja au vingi.

CSS selectors inafikia element za HTML kwa id, class, aina, property, thamani ya property na nyingine.

Kwa orodha kinaofikia, tafuta Mado ya Chaguo cha CSS.

Kwa sababu ya kumtaarifu vingine vingi, tumia komma kwenye kila kifungo (taarifu ya juu).

Matumizi ya matokeo

Aina Kuelewa
Matumizi

Matumizi ya NodeList yenye element yenye muhimu wa kifungo cha CSS.

Iwapo huna matumizi yaliyofikia, inatokana na NodeList yasiwe.

Fuatia kilele cha HTMLCollection na NodeList

NodeList na HTMLcollection zinaendelea sana.

zote zinafupiwa na kifupi cha matumizi ya kitabu (kitu) kinatokana na mawanda wa mabara (matumizi) ya kikolea (kitu). Inaweza kutumia namba ya kufikia kufikia matumizi. Namba ya kuanza ni 0.

zote zinaendelea length muafikia ya kifungo (kifupi) kinakapokutumia idadi ya element ya orodha (kikolea).

HTMLCollection niweza kufikiaMabaki wa kifaa cha mawasilianokwa kikolea.

NodeList niMabaki wa mawasilianokwa kikolea ya mabaki (mabaki ya maelezo, mabaki ya maelezo na mabaki ya maelezo).

Mabaki ya HTMLCollection inaweza kutumika kwa jina, id au namba ya kina.

Mabaki ya NodeList inaweza kutumika kwa kuzingatia kwa namba ya kina.

HTMLCollection inaonesha kwa sasa.Sasakwa kikolea.

Kwa mfano: Ikiwa kumekuwa kumengeneza <li> kwa orodha ya DOM, orodha ya HTMLCollection itakapochangwa.

NodeList inaonekana kama:Kadhaifukwa kikolea.

Kwa mfano: Ikiwa kumekuwa kumengeneza <li> kwa orodha ya DOM, orodha ya NodeList haichangwa.

getElementsByClassName() na getElementsByTagName() Method inatuma HTMLCollection ya sasa.

querySelectorAll() Method inatuma NodeList ya kidogo.

childNodes Mafanikio ya hatua inatuma NodeList ya sasa.

Msaada wa kusaidia wa kusaidia

document.querySelectorAll() Ni kwa Dom Level 3 (2004) ya mafanikio.

Wote wa kila browser zinaongeza kwa kusaidia:

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

Vipindi vya pengine

Mafunzo:

Chaguo cha CSS

Mado ya Chaguo cha CSS

Mafunzo ya NodeList ya JavaScript

Method querySelector:

Method querySelector() ya Element

Method querySelectorAll() ya Element

Method querySelector() ya Document

Method querySelectorAll() ya Document

GetElement Method:

Method getElementById() ya Document

Method getElementsByTagName() ya Document

Method getElementsByClassName() ya Document