Element#

Element.matches()#

Metoda matches() zwraca boolowską wartość true jeśli dany element pasuje do przekazanego selektora absolutnego, w przeciwnym razie zwrócona zostanie wartość false.

Składnia#

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 boolean = element.matches(selectors);

gdzie poszczególne człony oznaczają:

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

  1. Zwróć boolowskie true jeśli obiekt kontekstu znajduje się w wyniku dopasowania łańcucha znakowego selektorów selectors na zestawie składającym się z obiektu kontekstu, w przeciwnym razie zwróć boolowskie false.

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

			var context = document.getElementById("test");

			var info = document.getElementById("info");
			var result = "";
			var sel = "('" + selectors + "'): ";

			if (context.matches){
				result += "matches" + sel + context.matches(selectors);
			}
			else if (context.mozMatchesSelector){
				result += "mozMatchesSelector" + sel + context.mozMatchesSelector(selectors);
			}
			else if (context.webkitMatchesSelector){
				result += "webkitMatchesSelector" + sel + context.webkitMatchesSelector(selectors);
			}
			else if (context.msMatchesSelector){
				result += "msMatchesSelector" + sel + context.msMatchesSelector(selectors);
			}

			info.innerHTML = result;

		}

	</script>

</head>

<body>
	<p id="test" class="class1 class2">Akapit będący obiektem kontekstu (id="test1", class="class1 class2").</p>

	<p>Kliknij konkretny przycisk by dopasować akapit do przekazanego selektora.</p>
	<input type="button" value="matches('p')" onclick="matchElement('p')">
	<input type="button" value="matches('#test')" onclick="matchElement('#test')">
	<input type="button" value="matches('.class1')" onclick="matchElement('.class1')">
	<input type="button" value="matches('.class1.class2')" onclick="matchElement('.class1.class2')">
	<input type="button" value="matches('#test2, .class1')" onclick="matchElement('#test2, .class1')">
	<input type="button" value="matches('body p')" onclick="matchElement('body p')">
	<input type="button" value="matches(':scope')" onclick="matchElement(':scope')">
	<input type="button" value="matches(':scope p')" onclick="matchElement(':scope p')">
	<input type="button" value="matches('div')" onclick="matchElement('div')">

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

</html>

Metoda matches() zaliczana jest do grupy określanej jako API selektorów. Po raz pierwszy pojawiła się w osobnym dokumencie "Selectors API Level 2".

Na chwilę obecną jedynie przeglądarki Firefox i Chrome obsługują metodę matches(). W pozostałych programach można skorzystać z analogicznej niestandardowej metody matchesSelector() w połączeniu z odpowiednim prefiksem (jak w powyższym przykładzie).

Interfejs Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
boolean matches(DOMString selectors);

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Element (H1) Element.matches() (H2) Składnia (H3) Interfejs Web IDL (H3) Specyfikacje i inne materiały (H3)