5.1 document.getElementById()

Som ni vet skapades JavaScript för att lägga till lite animation på HTML-sidor. Hittills har vi inte sagt så mycket om det. Hur lägger man till samma animation? Hur ändrar man till exempel färgen på ett element?

För att ändra färgen på ett element måste du först hitta detta element. För att göra detta finns en funktion document.getElementById();Du skriver i din HTML idvid önskat element, och kommer sedan åt det från JavaScript. Exempel:

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>

Efter att användaren klickat på bilden kallas funktionen changeImge(). Inuti det får vi elementet imageav dess ID, och ändrar sedan värdet på dess src-attribut till ett nytt. Vilket gör att elementet imgladdar en ny bild.

5.2 document.createElement()

Förutom att få ett element kan vi även skapa nya element och ta bort befintliga.

Att skapa element är väldigt enkelt. För att göra detta måste du göra två saker: a) skapa ett element , b) lägga till det på rätt plats i dokumentet. Det brukar se ut så här:

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

En annan mycket användbar metod är window.navigate(). Med den kan du tvinga webbläsaren att ladda en ny sida istället för den nuvarande. Skicka det bara URLtill den här metoden och ring det. Exempel:

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

I exemplet ovan, efter att användaren klickar på bilden, kommer sidan google.com att laddas till den aktuella fliken.

5.4 Aktuell URL

Och en till nyttig sak. Ibland behöver ett skript känna till den aktuella sidans URL. Till exempel kan samma skript läggas till på olika sidor. Hur man gör det?

Det finns en speciell fastighet för detta.document.location.href

var currentURL = document.location.href;