HTMLCollection#
HTMLCollection.item()#
Metoda item() zwraca węzeł elementowy o określonym indeksie z danej kolekcji elementowej. Jeśli w kolekcji elementowej nie ma elementu 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 element = htmlCollection.item(index); var element = htmlCollection[index]; // alternatywa z JS
gdzie poszczególne człony oznaczają:
- element - referencja do zwracanego elementu lub wartość
null. - htmlCollection - kolekcja elementowa będąca obiektem kontekstu.
- index - liczba całkowita reprezentująca pozycję elementu w kolekcji elementowej.
Algorytm wywołania metody item(index) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć węzeł elementowy z pozycją wskazywaną przez index, który znajduje się w obiekcie kontekstu. Jeśli w obiekcie kontekstu nie ma węzła elementowego 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").children; // pobranie kolekcji z dowolnymi węzłami elementowymi
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
}
var info = document.getElementById("info");
info.innerHTML = "Interfejs kolekcji: " + collection // [object HTMLCollection]
+ "<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 elementów kontenera DIV.</p>
<input type="button" value="div.children.item(0)" onclick="getItem(0)">
<input type="button" value="div.children.item(1)" onclick="getItem(1)">
<input type="button" value="div.children[2]" onclick="getItem(2)">
<input type="button" value="div.children[3]" onclick="getItem(3)">
<input type="button" value="div.children.item(10)" onclick="getItem(10)">
<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 HTMLCollection.length zwraca wartość null, kiedy nawiasowe odwołanie [] zwraca wartość undefined.
Składnia Web IDL#
[LegacyUnenumerableNamedProperties] interface HTMLCollection { getter Element? item(unsigned long index); }