5.1 document.getElementById()

Seperti yang anda ketahui, JavaScript telah dicipta untuk menambah beberapa animasi pada halaman HTML. Setakat ini, kami tidak banyak bercakap mengenainya. Bagaimana untuk menambah animasi yang sama ini? Bagaimana, sebagai contoh, menukar warna unsur?

Untuk menukar warna elemen, anda perlu mencari elemen ini terlebih dahulu. Untuk melakukan ini, terdapat fungsi document.getElementById();Anda menulis dalam HTML anda idpada elemen yang dikehendaki, dan kemudian mengaksesnya daripada JavaScript. Contoh:

<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>

Selepas pengguna mengklik pada imej, fungsi dipanggil changeImge(). Di dalamnya, kita mendapat elemen imagedengan its ID, dan kemudian menukar nilai atribut srcnya kepada yang baharu. Yang akan menyebabkan elemen imgmemuatkan imej baharu.

5.2 document.createElement()

Selain mendapatkan elemen, kita juga boleh mencipta elemen baharu dan memadam elemen sedia ada.

Mencipta elemen adalah sangat mudah. Untuk melakukan ini, anda perlu melakukan dua perkara: a) cipta elemen , b) tambahkannya ke tempat yang betul dalam dokumen. Ia biasanya kelihatan 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 kaedah window.navigate().

Satu lagi kaedah yang sangat berguna ialah window.navigate(). Dengan itu, anda boleh memaksa penyemak imbas untuk memuatkan halaman baharu dan bukannya halaman semasa. Hanya hantar URLke kaedah ini dan panggilnya. Contoh:

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

Dalam contoh di atas, selepas pengguna mengklik pada imej, halaman google.com akan dimuatkan ke dalam tab semasa.

5.4 URL semasa

Dan satu lagi perkara yang berguna. Kadangkala skrip perlu mengetahui URL halaman semasa. Sebagai contoh, skrip yang sama boleh ditambah ke halaman yang berbeza. Bagaimana hendak melakukannya?

Terdapat harta khas untuk ini.document.location.href

var currentURL = document.location.href;