Ketika membuka sebuah halaman web di browser, file HTML dari web tersebut akan dimuat dan dirender/ ditampilkan pada layar. Pada saat merender file HTML, browser akan membuat DOM (Document object Model)/ model objek dokumen dari halaman tersebut yang mana merupakan model berorientasi objek dari struktur logicnya.

dalam wikipidia disebutkan bahwa :
Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.

Dengan bahasa yang lebih mudah dicerna DOM adalah standar untuk memilih, merubah, menambahkan, atau menghapus element dalam HTML. Dengan DOM, kita dapat memanipulasi file HTML agar menjadi web yang dinamis.

Document Object Model merepresentasikan dokument sebagai pohon objek:

Memilih Elemen

//Memilih elemen berdasarkan ID
document.getElementById(id)

//Memilih elemen berdasarkan Class
document.getElementsByClassName(classname)

//Memilih elemen berdasarkan nama tag
document.getElementsByTagName(tagname)

//Memilih elemen berdasarkan attribut 'name'
document.getElementsByName(name)

Contoh :

<div id="navbar">....</div>
<script>
var mynavbar=document.getElementById("navbar");
</script>

Perlu diketahui bahwa metode document.getElementsbyClassName(classname) , document.getElemetsbyTagName(tagname) , document.getElementsByName(name) akan memilih semua elemen yang sesuai, dan mengembalikan elemen-elemen tersebut sebagai array.

Contoh:

<p class="red">Hi</p>
<p class="red">Hello</p>
<p class="red">Hola</p>
<script>
var text=document.getElementsByClassName("red");
alert(text[0].innerHTML);
//Outputnya adalah "Hi"
</script>

untuk mengubah, menghapus, dan menambahkan elemen akan dibahas pada artikel berikutnya. Terimakasih.