NodeList#
NodeList.length#
Właściwość length zwraca liczbę węzłów znajdujących się w danej kolekcji węzłowej. Jeśli kolekcja węzłowa 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:
var nodes = nodeList.length;gdzie poszczególne człony oznaczają:
- nodes - liczba całkowitą reprezentująca ilość węzłów w kolekcji węzłowej.
- nodeList - kolekcja węzłowa będąca obiektem kontekstu.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function getCollection(method){
var contener = document.getElementById("contener"); // referencja do kontenera div
if (method == "child"){
var collection = contener.childNodes; // pobranie kolekcji z dowolnymi węzłami
}
else if (method == "name1"){
var collection = document.getElementsByName("test"); // pobranie kolekcji z węzłami o nazwie test
}
else if (method == "name2"){
var collection = document.getElementsByName("TEST"); // pobranie kolekcji z węzłami o nazwie TEST
}
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 name="test">Pierwszy akapit (name="test") w kontenerze DIV.</p>
<p name="Test">Drugi akapit (name="Test") w kontenerze DIV.</p>
<p name="test">Trzeci akapit (name="test") w kontenerze DIV.</p>
</div>
<p>Kliknij przycisk by pobrać konkretną kolekcję w kontenerze DIV.</p>
<input type="button" value="div.chilNodes" onclick="getCollection('child')">
<input type="button" value="getElementsByName('test')" onclick="getCollection('name1')">
<input type="button" value="getElementsByName('TEST')" onclick="getCollection('name2')">
<p style="color: blue;">Szczegółowe informacje dla pobranej kolekcji:</p>
<p id="info"></p>
</body>
</html>Składnia Web IDL#
interface NodeList { readonly attribute unsigned long length; }
Specyfikacje i inne materiały#
Pasek społecznościowy