HTMLCollection#

HTMLCollection.length#

Właściwość length zwraca liczbę węzłów elementowych znajdujących się w danej kolekcji elementowej. Jeśli kolekcja elementowa będzie pusta to zwrócona zostanie wartość 0. 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 elements = htmlCollection.length;

gdzie poszczególne człony oznaczają:

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

			var contener = document.getElementById("contener"); // referencja do kontenera div

			if (method == "child"){
				var collection = contener.children; // pobranie kolekcji ze wszystkimi węzłami elementowymi
			}

			else if (method == "p"){
				var collection = contener.getElementsByTagName("p"); // pobranie kolekcji z akapitami
			}

			else if (method == "*"){
				var collection = contener.getElementsByTagName("*"); // pobranie kolekcji ze wszystkimi węzłami elementowymi
			}

			var collectionLen = collection.length;

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

			var result = "Interfejs kolekcji: " + collection // [object NodeList]
					+ "<br>" + "Właściwość length: " + collection.length;

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

				result += "<br><br>" + "Interfejs dziecka [" + i + "]: " + collection[i]
						+ "<br>" + "Właściwość textContent: " + collection[i].textContent;

			}

			info.innerHTML = result;

		}

	</script>

</head>

<body>
	<div id="contener">
		<p>Pierwszy akapit w kontenerze DIV.</p>
		<div>Pierwszy blok w kontenerze DIV.</div>
		<p>Drugi akapit w kontenerze DIV.</p>
		<div>Drugi blok akapit w kontenerze DIV.</div>
		<p>Trzeci akapit w kontenerze DIV.</p>
	</div>

	<p>Kliknij przycisk by pobrać konkretną kolekcję elementów w kontenerze DIV.</p>
	<input type="button" value="div.children" onclick="getCollection('child')">
	<input type="button" value="div.getElementsByTagName('p')" onclick="getCollection('p')">
	<input type="button" value="div.getElementsByTagName('*')" onclick="getCollection('*')">

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

</html>

Składnia Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[LegacyUnenumerableNamedProperties]
interface HTMLCollection {
	readonly attribute unsigned long length;
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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