DOM - Fitur getElementsByTagName dan getElementById

Hallo pembaca setia Otrust!!!

Selama ini saya hanya menulis tentang tutorial yang mengandalkan permasalhan sederhana dan tidak begitu sulit namun dibutuhkan banyak orang (Katanya). Namun, kekurangan saya adalah saya belum memberikan tutorial tentang pemrogaman web.

Nah, kali ini saya akan memberikan tutorial pemrogaman web. Dan materi yang saya berikan adalah tentang pemanfaatan DOM (Document Object Model).

            “Apa sih DOM (Document Object Model) itu mas? Bahasa dari planet mana tuh?”

Tenang, jangan takut dan bingung dengan yang dimaksud DOM itu apa. DOM itu sebuah API (Application Progamming Interface) yang dikembangkan cukup lama oleh W3C pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Nah, apa sih DOM itu sendiri? DOM (Document Object Model) adalah objek model standar untuk HTML dan XML yang bersifat platform independent. DOM itu sendiri dikembangkan dan disediakan kepada programmer (bukan tukang bakso).

Apabila sobat mengenal parsing. Nah, ketika seseorang yang paham tentang DOM, lalu kita Tanya pasti jawaban mereka “Lagi main parsing data yah?” dan tergantung juga siapa yang ditanya (ane ketika Tanya tentang DOM jawabannya gitu sobat. Hehe..). Secara sederhana, DOM adalah sebuah cara untuk memanipulasi apapun didalam web. DOM itu sendiri tidak terikat dengan javascript dan sepenuhnya bukan javascript.

Untuk lebih detailnya tentang DOM silahkan sobat baca-baca sendiri aja di sini. Untuk tutorial ini saya akan menggunakan fitur document.getElementsByTagName dan document.getElementById.

            “Mas, terus perbedaan document.getElementsByTagName dan document.getElementById apa dong?”

Nah, perbedaanya adalah:

1. document.getElementById, digunakan untuk mengakses elemen DOM berdasarkan nilai properti id pada elemen. Hanya akan mengembalikan satu elemen DOM karena idealnya nilai properti id bersifat unik dalam satu dokumen. Jika terdapat lebih dari satu elemen dengan id yang sama, maka elemen yang pertama ditemukan akan dikembalikan.
2. document.getElementsByTagName, memilih elemen-elemen dengan tag HTML tertentu. Sama seperti semua fungsi yang mengembalikan banyak elemen DOM, memberikan nilai berupa HTMLCollection.

Sebelum mulai ngoding, persiapkan dulu Snack dan secangkir teh panas supaya nggak ngantuk (ciyeee…). Pertama kita akan menggunakan fitur document.getElementsByTagName. siapkan 2 file: 1 file dengan nama data.html dan 1 file dengan nama parser.php.

Berikut adalah file data.html: Selanjutnya buatlah source code pada parser.php seperti berikut ini:

Lalu jalankan di browser sobat dan hasilnya menjadi seperti ini:

Nah, itulah tampilan hasil parsing menggunakan DOM dan memanfaatkan fitur document.getElementsByTagName. Selanjutnya kita membuat project baru dengan nama file yang sama dan perbedaanya kali ini kita menggunakan fitur document.getElementById.

Pada file data.html tadi kita tambahkan 1 tabel lagi atau lebih mudahnya tabel sebelumnya di gandakan aja dengan menekan Ctrl+C lalu Ctrl+V (Kebiasaan anak IT cuyy…). Namun, disetiap tabel diberi ID yang berbeda seperti source code berikut ini:

File data.html: Lalu untuk file parser.php yang sebelumnya tadi kita hapus source code-nya dan ubah menjadi berikut ini: Hasilnya seperti ini:

Nah, id yang kita beri pada tabel-tabel tersebutlah yang dipanggil. Karena tadi sebelumnya ada 2 tabel dan yang kita panggil hanya satu tabel maka kita ambil menggunakan id tersebut.

            “Mas? Kalau saya mengambil satu tabel tetapi menggunakan document.getElementsByTagName kira-kira bisa nggak yah?”

Tentu bisa. Namun, setiap fitur yang disediakan oleh DOM pasti memiliki manfaat sendiri-sendiri. Untuk 2 fitur yang saya jelaskan tadi silahkan dipahami lagi dan dipelajari. Apalah daya saya juga masih belajar… (wkwkwk… peace sobat).