Mendapatkan Elemen HTML ~ Pemrograman dan Teknologi

Untuk mengubah isi / content, atribut, dan style dari element HTML, yang pertama harus kita lakukan adalah mendapatkan objek yang mewakili element yang akan kita ubah. Method yang kita perlukan sudah ada dalam objek element. Method-method tersebut yaitu :

document.getElementById
document.getElementsByTagName
document.getElementsByClassName

Untuk mendapatkan element HTML berdasarkan nama id-nya kita bisa menggunakan "document.getElementById".

<HTML>
<HEAD>
</HEAD>
<BODY>
<p id="paragraf">Ini cuma contoh</p>
<SCRIPT>
    var par=document.getElementById("paragraf");
    alert(par.outerHTML);
 </SCRIPT>
</BODY>
</HTML>

pada contoh di atas, par menyimpan elemen HTML berupa paragraf dengan id "paragraf" yang didapatkan dengan menggunakan "document.getElementById". Par mempunyai beberapa properti, salah satunya adalah outerHTML yang menampilkan nama elemen beserta isinya.

Selain outer HTML, ada properti lain yang umumnya dimiliki oleh element yang memiliki tag pembuka dan tag penutup yaitu innerHTML.

<HTML>
<HEAD>
</HEAD>
<BODY>
<p id="paragraf">Ini cuma contoh</p>
<SCRIPT>
    var par=document.getElementById("paragraf");
    par.innerHTML="Ini sudah diubah";
 </SCRIPT>
</BODY>
</HTML>

Kalau kalian memperhatikan isi dari tag paragraf, kalian akan tahu bahwa ada yang berubah dari apa yang seharusnya ditampilkan kode HTML. Properti innerHTML yang berisi content dari element dapat diubah seperti script pada contoh di atas. innerHTML yang hanya menampilkan isi dari elemen HTML berbeda dengan outerHTML yang menampilkan isi sekaligus element HTML-nya. outerHTML bisa digunakan tag yang tidak memiliki tag penutup, tapi innerHTML tidak bisa karena tag tunggal tidak memiliki content / isi.

Selain dengan menggunakan getElementById, kita juga bisa mendapatkan beberapa element berdasarkan nama classnya dengan document.getElementsByClassName.

<HTML>
<HEAD>
</HEAD>
<BODY>
    <p class="paragraf">Ini cuma contoh 1</p>
    <p class="paragraf">Ini cuma contoh 2</p>
    <SCRIPT>
        var par=document.getElementsByClassName("paragraf");
        par[0].innerHTML="Ini sudah diubah 0";
        par[1].innerHTML="Ini sudah diubah 1";
    </SCRIPT>
</BODY>
</HTML>

Berbeda dengan getElementById yang hanya bisa mendapatkan satu objek dari satu elemen HTML saja, getElementsByClassName bisa digunakan untuk mendapatkan objek dari beberapa element sekaligus. Hasil dari getElementsByClassName bisa diakses sebagai array seperti contoh di atas.

Kita juga bisa mendapatkan elemen HTML berdasarkan nama Tag-nya dengan getElementsByTagName.

<HTML>
<HEAD>
</HEAD>
<BODY>
    <p class="paragraf">Ini cuma contoh 1</p>
    <p class="paragraf">Ini cuma contoh 2</p>
    <SCRIPT>
        var par=document.getElementsByTagName("p");
        par[0].innerHTML="Ini sudah diubah 0";
        par[1].innerHTML="Ini sudah diubah 1";
    </SCRIPT>
</BODY>
</HTML>

Sama dengan getElementsByClassName, getElementsByTagName juga mengembalikan nama-nama elemen yang bisa diakses melalui array.

Selain itu, jika kita menggunakan form dalam kode HTML kita, kita juga bisa menggunakan name dari suatu input dalam form.

<HTML>
<HEAD>
</HEAD>
<BODY>
    <FORM name="formku" Method="POST" action="karimisya.000webhostapp.com">
        <input type="text" name="nama" value="Namaku">
        <input type="text" name="password" value="Passwordku">
        <input type="Submit" name="submit" value="Submit">
    </FORM>
    <SCRIPT>
        document.onclick=function(e){
        alert(document.formku.nama.value);
    }
    </SCRIPT>
</BODY>
</HTML>

Kalau kalian memperhatikan kode HTML dan mencoba mencari tahu dengan mengubah scriptnya, kalian akan paham caranya. Pertama, gunakan objek document yang dilanjutkan dengan nama form dan dipisahkan dengan titik(.). Setelah nama form, barulah kita menempatkan nama input dalam form beserta atribut yang ingin diakses. Contohnya, "document.formku.nama" menunjukkan bahwa nama formnya adalah formku dan nama inputnya adalah nama.