CodeGym /Corsi /All lectures for IT purposes /Lavorare con il Document Object Model (DOM)

Lavorare con il Document Object Model (DOM)

All lectures for IT purposes
Livello 1 , Lezione 345
Disponibile

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:


<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;
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION