ParentNode#

ParentNode.querySelector()#

Metoda querySelector() zwraca pierwszego potomka (będącego elementem), który znajduje się w danym węźle (zgodnie z porządkiem drzewa) i pasuje do przekazanego selektora absolutnego. Jeśli węzeł nie posiada potomka spełniającego te wymagania to zwrócona zostanie wartość null.

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 element = parentNode.querySelector(selectors);

gdzie poszczególne człony oznaczają:

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

  1. Zwróć pierwszy wynik zawężającego dopasowania łańcucha znakowego selektorów selectors na obiekcie kontekstu lub, jeśli wynik jest pustą listą, to zwróć wartość null.

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 getElementQuery(selectors){

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

			var oneElement = document.querySelector(selectors); // pobranie pierwszego elementu pasującego do selektora

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

			if (oneElement){
					result = "Interfejs elementu: " + oneElement
						+ "<br>" + oneElement.textContent;
			}

			else{
				result = "Brak elementu: " + oneElement;
			}

			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="querySelector('p')" onclick="getElementQuery('p')">
	<input type="button" value="querySelector('#test1')" onclick="getElementQuery('#test1')">
	<input type="button" value="querySelector('.class1')" onclick="getElementQuery('.class1')">
	<input type="button" value="querySelector('.class1.class2')" onclick="getElementQuery('.class1.class2')">
	<input type="button" value="querySelector('#test1, .class1)" onclick="getElementQuery('#test1, .class1')">
	<input type="button" value="querySelector('div')" onclick="getElementQuery('div')">

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

</html>

Metoda querySelector() 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 {
	Element? querySelector(DOMString selectors);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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