HTML DOM Dokument querySelector()
Voorbeelde
Kry die eerste <p> element:
document.querySelector("p");
Kry die eerste element met class="example":
document.querySelector(".example");
Meer voorbeelde hieronder.
Definisie en gebruik
Die querySelector()metode gee die eerste element terug wat by 'n CSS-kieser pas.
Om alle wedstryde terug te gee (nie net die eerste nie), gebruik querySelectorAll()eerder die.
Beide querySelector()en querySelectorAll()gee 'n NodeList terug .
Beide querySelector()en querySelectorAll()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.querySelector(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 eerste element wat by die CSS-kieser(s) pas. Indien geen passings gevind word nie, nullword teruggestuur. |
Meer voorbeelde
Kry die eerste <p> element in met class="example":
document.querySelector("p.example");
Verander die teks van die element met id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Kies die eerste <p> element met die ouer is 'n <div> element.
document.querySelector("div > p");
Kies die eerste <a>-element wat 'n "teiken"-kenmerk het:
document.querySelector("a[target]");
Kies die eerste <h3> of die eerste <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Kies die eerste <h3> of die eerste <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Blaaierondersteuning
document.querySelector()is 'n DOM Vlak 1 (1998) kenmerk.
Dit word ten volle ondersteun in alle blaaiers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |