Cara Mengakses Node

Node yang dikenal ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE, DOCUMENT_NODE, DOCUMENT_TYPE_NODE, DOCUMENT_FRAGMENT_NODE, NOTATION_NODE, CDATA_SECTION_NODE, PROCESSING_INSTRUCTION_NODE, dan COMMENT_NODE.

Dari sekian banyak itu, node yang di bahas kali ini adalah ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE - sisanya kemungkinan menyusul, tetapi tidak janji.

<P>Halo, apa kabar.</P>

Kode di atas terdapat dua node, yaitu Element node P dan Text node dengan nilai 'Halo, apa kabar.'. Text node di dalam elemen dipertimbangkan sebagai child node dari elemen, dan sebaliknya elemen itu dipertimbangkan sebagai Parent node dari Text node.

Jika menuliskannya:

<P>Halo, <B>apa kabar.</B></P>

Element node P mempunyai dua child node, yaitu Text node dengan nilai 'Halo, ' dan Element node B (Element node B mempunyai satu child node, yaitu Text node dengan nilai 'apa kabar.').

Kalaupun penulisan di atas di tambahkan dengan Attribute node, semisal:

<P STYLE="color: red;">Halo, <B>apa kabar.</B></P>

Element node P tetap mempunyai dua child node, karena Attribute node tidak dipertimbangkan sebagai child node dari suatu elemen.

ELEMENT_NODE
Untuk mengakses Element node di dalam dokumen HTML, anda bisa gunakan metode Document.getElementById(), atau Document.getElementsByTagName().

Metode getElementById() akan mendapatkan elemen berdasar ID-nya. Bentuk sintaksnya:

[window.]document.getElementById("elemID")

Parameter elemID adalah nilai atribut ID dari elemen yang di akses. Sebagai contoh jika ada satu contoh IMG seperti berikut:

<IMG ID="myIMG" SRC="image.png" HEIGHT="45" WIDTH="45">

Untuk mengakses IMG di atas berdasar ID-nya, adalah seperti berikut:

var imgObj = document.getElementById("myIMG");

Metode getElementsByTagName() akan mengembalikan koleksi elemen berdasar nama tag yang ditetapkan. Bentuk sintaksnya:

[window.]document.getElementsByTagName("tagName")

Parameter tagName adalah nama tag dari elemen yang ingin didapatkan koleksinya.

Contoh di bawah ini mengembalikan koleksi elemen IMG di dalam dokumen HTML, di sini melibatkan properti length:

<IMG ID="myIMG1" SRC="image1.png" HEIGHT="45" WIDTH="45"> <IMG ID="myIMG2" SRC="image2.png" HEIGHT="45" WIDTH="45"> <IMG ID="myIMG3" SRC="image3.png" HEIGHT="45" WIDTH="45"> <SCRIPT TYPE="text/javascript"> var myImages = document.getElementsByTagName("IMG"); alert(myImages.length); // 3 </SCRIPT>

Setiap IMG di dalam koleksi memiliki indeks dari posisinya. Anda bisa menentukan IMG mana di dalam koleksi akan dikembalikan, seperti berikut:

document.getElementsByTagName("IMG")[0];

Di atas digunakan untuk mengembalikan IMG ber-ID 'myIMG1'. Jika ingin IMG ber-ID 'myIMG2' dikembalikan, bisa menuliskannya seperti berikut:

document.getElementsByTagName("IMG")[1];

dst...

ATTRIBUTE_NODE
DOM menyediakan beberapa metode untuk mengakses atribut dari suatu elemen. Dengan metode yang disediakan, anda bisa memanipulasi atribut, misalnya mengganti nilai atribut, bahkan menghapus atribut dari elemen yang anda mau.

Contoh berikut mendapatkan atribut SRC dari IMG:

<IMG ID="myIMG" SRC="image.png" HEIGHT="45" WIDTH="45"> <SCRIPT TYPE="text/javascript"> var getSRC = document.getElementById("myIMG").getAttributeNode("src"); // mengembalikan "image.png" </SCRIPT>

Contoh berikut menetapkan atribut SRC beserta nilainya untuk IMG:

<IMG ID="myIMG" SRC="image.png" HEIGHT="45" WIDTH="45"> <SCRIPT TYPE="text/javascript"> document.getElementById("myIMG").setAttribute("src", "another.png"); // SRC sekarang bernilai "another.png" </SCRIPT>

Contoh terakhir jika anda memang ingin menghapus atribut SRC dari IMG:

<IMG ID="myIMG" SRC="image.png" HEIGHT="45" WIDTH="45"> <SCRIPT TYPE="text/javascript"> document.getElementById("myIMG").removeAttribute("src"); // sekarang IMG tidak mempuyai atribut SRC </SCRIPT>

Untuk mendapatkan Attribute node gunakan metode Element.getAttributeNode(). Untuk menetapkan atribut beserta nilainya, gunakan Element.setAttribute(). Untuk menghapus atribut, gunakan Element.removeAttribute().

TEXT_NODE
Seperti diberitahukan di atas, bahwa teks dari suatu elemen bukanlah nilai dari Element node, melainkan nilai dari Text node.

Contoh di bawah ini mengembalikan teks dari elemen P:

<P>Halo, apa kabar.</p> <SCRIPT TYPE="text/javascript"> var pElem = document.getElementsByTagName("p")[0]; alert(pElem.innerHTML); // mengembalikan "Halo, apa kabar." </SCRIPT>

Contoh di bawah ini mengganti teks dari elemen P dengan teks lainnya:

<P>Halo, apa kabar.</p> <SCRIPT TYPE="text/javascript"> var pElem = document.getElementsByTagName("p")[0]; pElem.innerHTML = "Halo, saya pengganti dari 'Halo, apa kabar.'"; </SCRIPT>

Masih banyak cara yang bisa digunakan untuk mengakses node, mudah-mudahan ini saja bisa ada manfaatnya.