5.1 dokumen.getElementById()

Seperti yang Anda ketahui, JavaScript dibuat untuk menambahkan beberapa animasi ke halaman HTML. Sejauh ini, kami belum banyak bicara tentang itu. Bagaimana cara menambahkan animasi yang sama ini? Bagaimana, misalnya, mengubah warna suatu elemen?

Untuk mengubah warna suatu elemen, Anda harus menemukan elemen ini terlebih dahulu. Untuk melakukan ini, ada fungsi document.getElementById();yang Anda tulis di HTML idpada elemen yang diinginkan, lalu akses dari JavaScript. Contoh:

Java university 

<head>
    <script>
        function changeImage()
        {
           var image = document.getElementById("image123");
            image.src = "new-image.png";
        }
    </script>
</head>
<body>
    <img id="image123" scr="big-image.png" onclick="changeImage()">
</body>

Setelah pengguna mengklik gambar, fungsi tersebut dipanggil changeImge(). Di dalamnya, kita mendapatkan elemen imagedengan its ID, lalu mengubah nilai atribut src-nya menjadi yang baru. Yang akan menyebabkan elemen imgmemuat gambar baru.

5.2 document.createElement()

Selain mendapatkan elemen, kita juga bisa membuat elemen baru dan menghapus elemen yang sudah ada.

Membuat elemen sangat mudah. Untuk melakukan ini, Anda perlu melakukan dua hal: a) membuat elemen , b) menambahkannya ke tempat yang tepat di dokumen. Biasanya terlihat seperti ini:


<head>
    <script>
        window.onload = function ()   {
            var image = document.createElement("IMG");
            var image.src = "big-image.png";
            document.body.addAfter(image);
        }
    </script>
</head>
<body>
</body>

5.3 metode window.navigate()

Metode lain yang sangat berguna adalah window.navigate(). Dengannya, Anda dapat memaksa browser untuk memuat halaman baru, bukan halaman saat ini. Berikan saja URLke metode ini dan panggil saja. Contoh:


  <body> 
    <img scr="big-image.png" onclick="window.navigate('https://google.com');"> 
  </body>

Pada contoh di atas, setelah pengguna mengklik gambar, halaman google.com akan dimuat ke tab saat ini.

5.4 URL Saat Ini

Dan satu hal lagi yang bermanfaat. Terkadang skrip perlu mengetahui URL halaman saat ini. Misalnya, skrip yang sama dapat ditambahkan ke halaman berbeda. Bagaimana cara melakukannya?

Ada properti khusus untuk ini.document.location.href

var currentURL = document.location.href;