ParentNode#
ParentNode.children#
Właściwość children zwraca kolekcję typu HTMLCollection ze wszystkimi dziećmi typu Element, którzy należą do danego węzła (zgodnie z porządkiem drzewa). Jeśli węzeł nie posiada żadnych dzieci spełniających te wymagania to zwrócona zostanie pusta kolekcja. 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 elements = parentNode.children;gdzie poszczególne człony oznaczają:
- elements - kolekcja elementowa ze wszystkimi dziećmi (elementami) w danym węźle.
- parentNode - węzeł będący obiektem kontekstu.
Właściwość children jest wyspecjalizowaną odmianą właściwości Node.childNodes, z tą jednak różnicą, że bierze pod uwagę jedynie elementy (pomijane są pozostałe rodzaje węzłów). W pewnych sytuacjach może to zwiększyć wydajność skryptów, gdyż późniejsze manipulowanie zwracanymi kolekcjami odbywa się na mniejszej liczbie węzłów. Mam tu głównie na myśli omijanie dużej ilości zbędnych węzłów tekstowych, które pojawiają się automatycznie w drzewie DOM z uwagi na czytelne tworzenie struktury znacznikowej dokumentu przez programistę (tzn. przez dodawanie w kodzie znaków spacji, tabulatorów czy nowego wiersza).
Trzeba wyraźnie zaznaczyć, że właściwość children operuje wyłącznie na dzieciach danego węzła, ale pomija dalszych jego potomków. W razie konieczności należałoby napisać własny algorytm przechodzenia po drzewie węzłów oparty na iteracjach (pętle) lub rekurencjach (funkcje) w połączeniu z innymi właściwościami dostępnymi dla każdego rodzaju węzła. Nie należy zapominać także o wbudowanym iteratorze węzłowym, który z zasady operuje na wszystkich węzłach należących do jego korzenia (włącznie z nim samym).
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function getChilds(method){
var contener = document.getElementById("contener"); // referencja do kontenera DIV
if (method == "children"){
var allElement = contener.children; // pobranie kolekcji ze wszystkimi elementami
}
else if (method == "childnodes"){
var allElement = contener.childNodes; // pobranie kolekcji ze wszystkimi węzłami
}
var allElementLen = allElement.length;
var info = document.getElementById("info");
var result = "Interfejs kolekcji: " + allElement
+ "<br>" + "Liczba węzłów: " + allElement.length;
for(var i = 0; i < allElementLen; i++){
var el = allElement[i];
result += "<br><br>" + "Interfejs pobranego węzła: " + el
+ "<br>" + "Właściwość nodeName: " + el.nodeName
+ "<br>" + "Właściwość textContent: " + el.textContent;
}
info.innerHTML = result;
}
</script>
</head>
<body>
<div id="contener">
<p>Pierwszy akapit w kontenerze DIV.</p>
<p>Drugi akapit w kontenerze DIV.</p>
<p>Trzeci akapit w kontenerze DIV.</p>
<!-- Pierwszy komentarz HTML -->
<!-- Drugi komentarz HTML -->
<strong>Mocna emfaza (strong) w kontenerze DIV.</strong>
<br>
<!-- Trzeci komentarz HTML -->
</div>
<p>Kliknij konkretny przycisk by pobrać wszystkie dzieci kontenera DIV.</p>
<input type="button" value="children" onclick="getChilds('children')">
<input type="button" value="childNodes" onclick="getChilds('childnodes')">
<p style="color: blue;">Szczegółowe informacje dla pobranej kolekcji:</p>
<p id="info"></p>
</body>
</html>Właściwość children pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
[NoInterfaceObject] interface ParentNode { [SameObject] readonly attribute HTMLCollection children; }