JS HTML DOM

****.      HTML DOM

HTML DOM merupakan standard W3C dalam pengelolaan dokumen web berbasis HTML. Didalam HTML DOM mendefinisikan sebuah pengaturan standard HTML sebagai objek sehingga kita diberi keleluasaan untuk mengakses dan memanipulasi dokumen HTML. Semua elemen HTML, sepanjang memiliki atribut dan isi, dapat diakses dengan DOM. Isi dapat diubah, dihapus, atau dibuat baru.

HTML DOM merupakan suatu platform yang independen, yang dapat digabungkan dengan bahasa pemrograman lain seperti Java, JavaScript, dan VBScript. DOM dapat digunakan dengan JavaScript untuk membaca dan mengubah dokumen HTML, XHTML dan XML. Dasar scrip yang harus dikuasai adalah HTML/XHTML dan JavaScript.

DOM dibagi menjadi beberapa bagian yaitu :

a)      Core DOM : untuk mendefinisikan sebuah standar objek pada struktur dokumen.

b)      XML DOM : untuk mendefinisikan sebuah standar objek pada dokumen XML.

c)      XML DOM : untuk mendefinisikan sebuah standar objek pada dokumen XML.

DOM membuat sebuah dokumen HTML sebagai “tree-structure” dengan elemen, atribut dan text, sehingga dengan DOM dapat dikatakan :

1)      Semua yang didalam dokumen HTML adalah sebuah node.

2)      Setiap tag HTML adalah sebuah elemen node.

3)      Teks dalam HTML adalah text node.

4)      Setiap atribut HTML adalah atribut node.

5)      Comment adalah comment node.

Jadi, HTML Document Object Model (HTML DOM) adalah sebuah standar bagaimana mengakses dan memanipulasi dokument HTML.

Find and Access Nodes :

Untuk dapat mencari elemen yang kita inginkan dan memanipulasinya terdapat beberapa cara :

1)      Menggunakan method getElementById() dan getElementsByTagName().

2)      Menggunakan properti elemen node parentNode, firstChild, dan lastChild.

Akses Node HTML DOM

document.getElementById("someID"); document.getElementsByTagName("tagName"); Method diatas adalah untuk mengakses atau mencari elemen yang kita inginkan. Untuk penelusuran semua node menggunakan perulangan sampai habis dibutuhkan properti length. var x=document.getElemensByTagName("p"); for (var i=0;i<x.length;i++) { }

ParentNode, FirstChild, dan LastChild

<table>     <tr>-------------------------------------------+        <td>John</td>  ----------->firstChild    |  <td>Doe</td>                                      +-----> parentNode  <td>Alaska</td> ---------->lastChild    |     </tr>-------------------------------------------+ </table> Contoh untuk menghapus node var x = document.getElementById("maindiv"); x.parentNode.removeChild(x)

Informasi pada node

Setiap node mempunyai beberapa properti yang berisi beberapa informasi tentang node tersebut. Property sebuah node adalah : 1)      nodeName a.       nodeName dari sebuah elemen adalah nama tag b.      nodeName dari sebuah atribut adalah nama atribut c.       nama dari sebuah text node selalu #text d.      nama dari node dokumen selalu #document 2)      nodeValue dalam text node, properti nodeValue berisi text. Dalam atribut node, properti nodeValue berisi nilai atribut. Properti nodeValue tidak tersedia dalam dokumen dan elemen node. 3)      nodeType       Element Type                                Node Type       Element                                               1       Attribut                                               2       Text                                                    3       Comment                                            8

innerHTML

var x = document.getElementById("myHeader"); alert(x.length);

Kode diatas digunakan untuk mengakses string pada id myHeader

Posted in: Javascript