Mendapatkan Elemen DOM dalam JavaScript

Sekarang kita akan belajar cara mendapatkan elemen DOM halaman untuk kemudian memanipulasinya mengikut keperluan.

Katakan kita mempunyai satu butang:

<input id="button" type="submit">

Mari dapatkan rujukan kepada butang ini dalam pemboleh ubah. Untuk ini, kita harus menggunakan kaedah querySelector dari objek khas document. Kaedah ini menerima pemilih CSS sebagai parameter dan mengembalikan rujukan kepada elemen yang ditemui oleh pemilih tersebut.

Butang kita mempunyai atribut id dengan nilai button. Ini bermakna kita boleh mencari butang ini dengan pemilih #button. Jadi, mari cari butang kita dan catat rujukannya ke dalam pemboleh ubah:

let button = document.querySelector('#button');
console.log(button);

Diberi 3 perenggan:

<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>

Catat rujukan kepada setiap perenggan dalam pemboleh ubah yang berasingan dan outputkan kandungan setiap pemboleh ubah tersebut ke konsol.