ParentNode#

ParentNode.querySelectorAll()#

Metoda querySelectorAll() zwraca kolekcję typu NodeList (statyczną) ze wszystkimi potomkami typu Element, którzy znajdują się w danym węźle (zgodnie z porządkiem drzewa) i pasują do przekazanego selektora absolutnego. Jeśli węzeł nie posiada żadnych potomków spełniających te wymagania to zwrócona zostanie pusta kolekcja.

Opis działania#

Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
var elements = parentNode.querySelectorAll(selectors);

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody querySelectorAll(selectors) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. Zwróć statyczny wynik zawężającego dopasowania łańcucha znakowego selektorów selectors na obiekcie kontekstu.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<script>

		function getCollectionQuery(selectors){

			var newP = document.createElement("p"); // nie został dołączony do drzewa dokumentu dlatego zostanie pominięty
			newP.textContent = "Nowy akapit";

			var allElements = document.querySelectorAll(selectors); // pobranie kolekcji ze wszystkimi elementami pasującymi do selektora
			var allElementsLen = allElements.length;

			var info = document.getElementById("info");

			var result = "Interfejs kolekcji: " + allElements // [object NodeList]
					+ "<br>" + "Liczba węzłów: " + allElements.length;

			for(var i = 0; i < allElementsLen; i++){

				result += "<br>" + allElements[i].textContent;

			}

			info.innerHTML = result;

		}

	</script>

</head>

<body>
	<p>Pierwszy akapit.</p>
	<p id="test1">Drugi akapit (id="test1").</p>
	<p class="class1">Trzeci akapit (class="class1").</p>
	<p class="class1 class2">Czwarty akapit (class="class1 class2").</p>
	<p class="Class1">Piąty akapit (class="Class1").</p>

	<p>Kliknij konkretny przycisk by pobrać wszystkie elementy pasujące do przekazanego selektora.</p>
	<input type="button" value="querySelectorAll('p')" onclick="getCollectionQuery('p')">
	<input type="button" value="querySelectorAll('#test1')" onclick="getCollectionQuery('#test1')">
	<input type="button" value="querySelectorAll('.class1')" onclick="getCollectionQuery('.class1')">
	<input type="button" value="querySelectorAll('.class1.class2')" onclick="getCollectionQuery('.class1.class2')">
	<input type="button" value="querySelectorAll('#test1, .class1')" onclick="getCollectionQuery('#test1, .class1')">
	<input type="button" value="querySelectorAll('div')" onclick="getCollectionQuery('div')">

	<p style="color: blue;">Szczegółowe informacje dla pobranej kolekcji:</p>
	<p id="info"></p>
</body>

</html>

Metoda querySelectorAll() zaliczana jest do grupy określanej jako API selektorów. Po raz pierwszy pojawiła się w osobnej specyfikacji Selectors API Level 1.

Składnia Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[NoInterfaceObject]
interface ParentNode {
	[NewObject] NodeList querySelectorAll(DOMString selectors);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

ParentNode (H1) ParentNode.querySelectorAll() (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)