ParentNode#

ParentNode.firstElementChild#

Właściwość firstElementChild zwraca pierwsze dziecko (będące elementem) należące do danego węzła. Jeśli węzeł nie posiada żadnego dziecka spełniającego te wymagania to zwrócona zostanie wartość null. Właściwość jest tylko do odczytu.

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 first_element = parentNode.firstElementChild;

gdzie poszczególne człony oznaczają:

Alternatywnie można skorzystać z podobnie działającego polecenia ParentNode.children[0].

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 getFirstChild(method){

			var contener = document.getElementById("contener"); // referencja do kontenera DIV
			var firstChild = null;
			var methodText = "";

			if (method == "method1"){
				firstChild = contener.firstElementChild;
				methodText = "Polecenie: firstElementChild";
			}

			else if (method == "method2"){
				firstChild = contener.firstChild;
				methodText = "Polecenie: firstChild";
			}

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

			info.innerHTML = methodText
					+ "<br>" + "Interfejs pobranego węzła: " + firstChild
					+ "<br>" + "Właściwość nodeName: " + firstChild.nodeName
					+ "<br>" + "Właściwość textContent: " + firstChild.textContent;

		}

	</script>

</head>

<body>
	<div id="contener"><!-- Pierwszy komentarz HTML -->
		<p>Pierwszy akapit w kontenerze DIV.</p>
		<p>Drugi akapit w kontenerze DIV.</p>
	<!-- Drugi komentarz HTML --></div>

	<p>Kliknij konkretny przycisk by pobrać pierwsze dziecko kontenera DIV.</p>
	<input type="button" value="firstElementChild" onclick="getFirstChild('method1')">
	<input type="button" value="firstChild" onclick="getFirstChild('method2')">

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

</html>

Właściwość firstElementChild pojawia się dopiero w specyfikacji DOM4. W przeszłości była ona definiowana dla interfejsu ElementTraversal w osobnej specyfikacji Element Traversal Specification.

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 {
	readonly attribute Element? firstElementChild;
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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