5.1 document.getElementById()

Som du ved, blev JavaScript oprettet for at tilføje nogle animationer til HTML-sider. Indtil videre har vi ikke sagt meget om det. Hvordan tilføjer man den samme animation? Hvordan ændrer man for eksempel farven på et element?

For at ændre farven på et element, skal du først finde dette element. For at gøre dette er der en funktion document.getElementById();Du skriver i din HTML idved det ønskede element, og tilgår det derefter fra JavaScript. Eksempel:


<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 at brugeren har klikket på billedet, kaldes funktionen changeImge(). Inde i det får vi elementet imageved dets ID, og ændrer derefter værdien af ​​dets src-attribut til en ny. Hvilket vil få elementet imgtil at indlæse et nyt billede.

5.2 document.createElement()

Udover at få et element, kan vi også oprette nye elementer og slette eksisterende.

At skabe elementer er meget let. For at gøre dette skal du gøre to ting: a) oprette et element , b) tilføje det til det rigtige sted i dokumentet. Det ser normalt sådan ud:


<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() metode

En anden meget nyttig metode er window.navigate(). Med den kan du tvinge browseren til at indlæse en ny side i stedet for den nuværende. Bare send det URLtil denne metode og kald det. Eksempel:


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

I eksemplet ovenfor, efter at brugeren klikker på billedet, vil siden google.com blive indlæst i den aktuelle fane.

5.4 Nuværende URL

Og endnu en nyttig ting. Nogle gange skal et script kende den aktuelle sides URL. For eksempel kan det samme script tilføjes til forskellige sider. Hvordan gør man det?

Der er en særlig ejendom til dette.document.location.href

var currentURL = document.location.href;