HTML DOM Dokument querySelectorAll()
Voorbeeld
Kies alle elemente met class="example":
document.querySelectorAll(".example");
Meer voorbeelde hieronder.
Definisie en gebruik
Die querySelectorAll()metode gee alle elemente terug wat by 'n CSS-keurder(s) pas.
Die querySelectorAll()metode gee 'n NodeList terug .
Die querySelectorAll()metode gooi 'n SYNTAX_ERR-uitsondering as die kieser(s) ongeldig is
Tutoriale:
Die JavaScript Node List Tutoriaal
QuerySelector Metodes:
Die Element querySelector() Metode
Die Element querySelectorAll() Metode
Die Document querySelector() Metode
Die Document querySelectorAll() Metode
GetElement-metodes:
Die dokument getElementById()-metode
HTML DOM NodeList / HTMLCollection
Die verskille tussen 'n HTML-versameling en 'n nodelys
'n NodeList en 'n HTMLCollection is albei skikking-agtige versamelings (lyste) van nodusse (elemente) wat uit 'n dokument onttrek is. Die nodusse kan verkry word deur indeksnommers. Die indeks begin by 0.
Albei voorwerpe het 'n lengte- eienskap wat die aantal elemente in die lys terugstuur.
'n HTML-versameling is 'n lewendige versameling : As jy 'n <li>-element by 'n lys in die DOM voeg, sal die lys in die HTML-versameling ook verander.
'n NodeList is 'n statiese versameling : As jy 'n <li> element by 'n lys in die DOM voeg, sal die lys in NodeList nie verander nie.
Die getElementsByClassName()en getElementsByTagName()
metodes gee 'n HTMLCollection terug.
Die querySelector()en querySelectorAll()
metodes gee 'n NodeList terug.
Sintaksis
document.querySelectorAll(CSS selectors)
Grense
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Terugkeerwaarde
| Tik | Beskrywing |
| Voorwerp | 'n NodeList met die elemente wat by die CSS-keurder(s) pas. Indien geen passings gevind word nie, nullword teruggestuur. |
Meer voorbeelde
Voeg 'n agtergrondkleur by die eerste <p>-element:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Voeg 'n agtergrondkleur by die eerste <p>-element met class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Aantal elemente met class="example":
let numb = document.querySelectorAll(".example").length;
Stel die agtergrondkleur van alle elemente met class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Stel die agtergrondkleur van alle <p>-elemente:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Stel die grens van alle <a>-elemente met 'n "teiken"-kenmerk:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Stel die agtergrondkleur van elke <p>-element waar die ouer 'n <div>-element is:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Stel die agtergrondkleur van alle <h3>-, <div>- en <span>-elemente:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Blaaierondersteuning
document.querySelectorAll() is 'n DOM Vlak 3 (2004) kenmerk.
Dit word ten volle ondersteun in alle blaaiers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |