Categories: Artikel HTML DOM

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 ialah 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, alasannya ialah Attribute node tidak dipertimbangkan sebagai child node dari suatu elemen.

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

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

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

Parameter elemID ialah nilai atribut ID dari elemen yang di akses. Sebagai teladan jikalau ada satu teladan IMG ibarat berikut:

Untuk mengakses IMG di atas berdasar ID-nya, ialah ibarat 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 ialah 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 mempunyai indeks dari posisinya. Anda sanggup memilih IMG mana di dalam koleksi akan dikembalikan, ibarat berikut:

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

Di atas dipakai untuk mengembalikan IMG ber-ID ‘myIMG1’. Jika ingin IMG ber-ID ‘myIMG2’ dikembalikan, sanggup menuliskannya ibarat berikut:

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

dst…

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

Contoh berikut mendapat 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 memutuskan 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 kini bernilai "another.png" </SCRIPT>

Contoh terakhir jikalau 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"); // kini IMG tidak mempuyai atribut SRC </SCRIPT>

Untuk mendapat Attribute node gunakan metode Element.getAttributeNode(). Untuk memutuskan 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, aku pengganti dari ‘Halo, apa kabar.’"; </SCRIPT>

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

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code