NodeList#
NodeList.item()#
Metoda item() zwraca węzeł o określonym indeksie z danej kolekcji węzłowej. Jeśli w kolekcji węzłowej nie ma węzeł o danym indeksie 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:
var node = nodeList.item(index); var node = nodeList[index]; // alternatywa z JS
gdzie poszczególne człony oznaczają:
- node - referencja do zwracanego węzła lub wartość
null. - nodeList - kolekcja węzłowa będąca obiektem kontekstu.
- index - liczba całkowita reprezentująca pozycję węzła w kolekcji węzłowej.
Algorytm wywołania metody item(index) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć węzeł z pozycją wskazywaną przez index, który znajduje się w obiekcie kontekstu. Jeśli w obiekcie kontekstu nie ma węzła z pozycją index, to zwróć wartość
null.
W przypadku alternatywy z JS dla metody item() mamy do czynienia z pojęciem obsługiwanych indeksów właściwości.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function getItem(method){
var collection = document.getElementById("contener").childNodes; // pobranie kolekcji z dowolnymi węzłami
if (method == 0){
var child = collection.item(method); // węzeł o indeksie 0
}
else if (method == 1){
var child = collection.item(method); // węzeł o indeksie 1
}
else if (method == 2){
var child = collection[method]; // węzeł o indeksie 2
}
else if (method == 3){
var child = collection[method]; // węzeł o indeksie 3
}
else if (method == 10){
var child = collection.item(method); // węzeł o indeksie 10
}
else if (method == 15){
var child = collection[method]; // węzeł o indeksie 15
}
var info = document.getElementById("info");
info.innerHTML = "Interfejs kolekcji: " + collection // [object NodeList]
+ "<br>" + "Właściwość length: " + collection.length;
if (child){
info.innerHTML += "<br><br>" + "Interfejs dziecka: " + child
+ "<br>" + "Indeks w kolekcji: " + method
+ "<br>" + "Właściwość textContent: " + child.textContent;
}
else{
info.innerHTML += "<br><br>Wartość: " + String(child)
+ "<br>" + "Indeks w kolekcji: " + method;
}
}
</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ć konkretny element z kolekcji akapitów kontenera DIV.</p>
<input type="button" value="div.chilNodes.item(0)" onclick="getItem(0)">
<input type="button" value="div.chilNodes.item(1)" onclick="getItem(1)">
<input type="button" value="div.chilNodes[2]" onclick="getItem(2)">
<input type="button" value="div.chilNodes[3]" onclick="getItem(3)">
<input type="button" value="div.chilNodes.item(10)" onclick="getItem(10)">
<input type="button" value="div.chilNodes[15]" onclick="getItem(15)">
<p style="color: blue;">Szczegółowe informacje dla pobranej kolekcji:</p>
<p id="info"></p>
</body>
</html>W powyższym przykładzie widać wyraźnie, że jest drobna różnica między dwoma analogicznymi (w teorii) sposobami. Metoda item() dla indeksu równego lub większego od wartości atrybutu NodeList.length zwraca wartość null, kiedy nawiasowe odwołanie [] zwraca wartość undefined.
Składnia Web IDL#
interface NodeList { getter Node? item(unsigned long index); }