5.1 document.getElementById()

Som du vet, ble JavaScript laget for å legge til litt animasjon til HTML-sider. Så langt har vi ikke sagt så mye om det. Hvordan legge til den samme animasjonen? Hvordan endre for eksempel fargen på et element?

For å endre fargen på et element, må du først finne dette elementet. For å gjøre dette er det en funksjon document.getElementById();Du skriver i HTML-en din idved ønsket element, og deretter får du tilgang til det fra JavaScript. Eksempel:

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>

Etter at brukeren har klikket på bildet, kalles funksjonen changeImge(). Inne i den får vi elementet imageav dets ID, og endrer deretter verdien av src-attributtet til et nytt. Som vil føre til at elementet imglaster et nytt bilde.

5.2 document.createElement()

I tillegg til å få et element, kan vi også lage nye elementer og slette eksisterende.

Det er veldig enkelt å lage elementer. For å gjøre dette må du gjøre to ting: a) lage et element , b) legge det til på riktig sted i dokumentet. Det ser vanligvis slik ut:


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

En annen veldig nyttig metode er window.navigate(). Med den kan du tvinge nettleseren til å laste en ny side i stedet for den nåværende. Bare gi det URLtil denne metoden og kall det. Eksempel:


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

I eksemplet ovenfor, etter at brukeren klikker på bildet, vil siden google.com lastes inn i gjeldende fane.

5.4 Gjeldende URL

Og en nyttig ting til. Noen ganger må et skript kjenne den gjeldende sidens URL. For eksempel kan det samme skriptet legges til på forskjellige sider. Hvordan gjøre det?

Det er en spesiell eiendom for dette.document.location.href

var currentURL = document.location.href;