Cara menggunakan html to dom

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan method html dom by attribute name. Perlu teman-teman ketahui sebelumnya, untuk mengacu ke attribute name suatu element html kalian bisa menggunakan method html dom getElementsByName(). Fungsi dari method tersebut adalah khusus untuk mengacu ke suatu element yang memiliki attribute name seperti komponen input form. Pada contoh penjelasan disini saya memiliki struktur input form seperti berikut :

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<form action="post">

<input type="text" name="username" value="baim">

</form>

</body>

</html>

Dari struktur kode input form tersebut saya ingin menampilkan nilai ke dalam alert box dari attribute value yang nantinya akan mengacu ke attribute name dari input text tersebut, maka kalian bisa menggunakan kode method html dom javascript getElementsByName(), seperti berikut :

1

2

3

4

<script>

    var elm = document.getElementsByName("username")[0].getAttribute("value");

    alert(elm);

</script>

sehingga struktur kode html dan javascript lengkapnya seperti dibawah ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<form action="post">

<input type="text" name="username" value="baim">

</form>

</body>

<script>

var elm = document.getElementsByName("username")[0].getAttribute("value");

alert(elm);

</script>

</html>

Sampai disini penjelasan saya mengenai cara menggunakan method html dom by attribute name, semoga bermanfaat.

Dalam JavaScript, document.write() dapat digunakan untuk menulis langsung ke output stream pada HTML.

Contoh:

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html> 

Jangan pernah menggunakan document.write() setelah dokumen dimuat. Hal ini akan menyebabkan menimpa dokumen.

Apa itu DOM dalam HTML?

DOM atau Document Object Model adalah antarmuka yang tidak berpihak kepada platform dan bahasa tertentu yang membuat program dan script dapat mengakses dokumen HTML secara dinamis dan mengupdate struktur, konten, dan style dokumen.

Mengapa kita perlu menggunakan DOM?

Fungsi DOM Setelah mengetahui pengertian DOM, untuk fungsinya sendiri adalah memungkinkan untuk memanipulasi tampilan web menggunakan JavaScript. Pada saat proses dari render file HTML sedang berlangsung, browser membuat model objek dokumen atau DOM.

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>

Apa fungsi DOM pada JavaScript?

Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat memanipulasinya menggunakan Javascript, berikut referensi dasar menurut Gabriel Tanner.