Terminologi Parent, Child, dan Sibling digunakan untuk menggambarkan hubungan antar node di dalam tree-structure.
Sebagai contoh, untuk Parent node mungkin bisa mempunyai satu atau lebih Child node. Bila Child node dengan Child node lainnya mempunyai Parent node yang sama, maka mereka di sebut Sibling.
Berikut di bawah ini adalah contoh suatu dokumen HTML:
<HTML>
<HEAD>
<TITLE>Judul Dokumen</TITLE>
</HEAD>
<BODY>
<H1>Judul level 1.</H1>
<P>Alinea 1.</P>
</BODY>
</HTML>
Berdasarkan dokumen HTML di atas:
- <HTML> node tidak mempunyai Parent node, karena <HTML> node adalah Root node.
- <HTML> node mempunyai dua Child node, yaitu <HEAD> node dan <BODY> node.
- Parent node dari <HEAD> node dan <BODY> node adalah <HTML> node.
- <HEAD> node mempunyai satu Child node, yaitu <TITLE> node.
- <TITLE> node mempunyai satu Child node, yaitu 'Judul Dokumen'.
- Parent node dari 'Judul level 1.' adalah <H1> node.
- Parent node dari 'Alinea 1.' adalah <P> node.
- <H1> node dan <P> node adalah Sibling, karena keduanya Child node dari <BODY> node.
First child dan Last child
First child dan Last child untuk dokumen HTML di atas:
- <HEAD> node First child dari <HTML> node, dan <BODY> node Last child dari <HTML> node.
- <H1> node First child dari <BODY> node, dan <P> node Last child dari <BODY> node.
Teks dari semua elemen di dalam dokumen di atas adalah First child dari elemen yang ada, sebagai contoh mengembalikan teks dari First child elemen H1:
<H1>Judul level 1.</H1>
<P ID="demo">Nilai First child elemen H1: <BUTTON ONCLICK="Func()">Klik</BUTTON></P>
<SCRIPT YPE="text/javascript">
function Func() {
var Element = document.getElementsByTagName("H1")[0];
var Out = document.getElementById("demo");
Out.innerHTML = Element.firstChild.nodeValue;
}
</SCRIPT>
