5.1 documento.getElementById()

Come sai, JavaScript è stato creato per aggiungere alcune animazioni alle pagine HTML. Finora non ne abbiamo parlato molto. Come aggiungere questa stessa animazione? Come, ad esempio, cambiare il colore di un elemento?

Per cambiare il colore di un elemento, devi prima trovare questo elemento. Per fare questo, c'è una funzione document.getElementById();che scrivi nel tuo HTML idnell'elemento desiderato, e poi accedi da JavaScript. Esempio:

Java webinar 

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

Dopo che l'utente fa clic sull'immagine, la funzione viene chiamata changeImge(). Al suo interno, otteniamo l'elemento imageda its ID, quindi cambiamo il valore del suo attributo src in uno nuovo. Ciò farà sì che l'elemento imgcarichi una nuova immagine.

5.2 documento.createElement()

Oltre a ottenere un elemento, possiamo anche creare nuovi elementi ed eliminare quelli esistenti.

La creazione di elementi è molto semplice. Per fare ciò, devi fare due cose: a) creare un elemento , b) aggiungerlo nel posto giusto nel documento. Di solito ha questo aspetto:


<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 Metodo window.navigate()

Un altro metodo molto utile è il window.navigate(). Con esso, puoi forzare il browser a caricare una nuova pagina invece di quella corrente. Basta passarlo URLa questo metodo e chiamarlo. Esempio:


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

Nell'esempio sopra, dopo che l'utente fa clic sull'immagine, la pagina google.com verrà caricata nella scheda corrente.

5.4 URL corrente

E un'altra cosa utile. A volte uno script deve conoscere l'URL della pagina corrente. Ad esempio, lo stesso script può essere aggiunto a pagine diverse. Come farlo?

C'è una proprietà speciale per questo.document.location.href

var currentURL = document.location.href;