5.1 document.getElementById()

Mint tudják, a JavaScriptet azért hozták létre, hogy animációt adjanak a HTML-oldalakhoz. Eddig nem sokat beszéltünk róla. Hogyan lehet hozzáadni ugyanazt az animációt? Hogyan lehet például megváltoztatni egy elem színét?

Egy elem színének megváltoztatásához először meg kell találnia ezt az elemet. Ehhez van egy függvény, amit document.getElementById();a HTML-be írsz ida kívánt elemhez, majd JavaScriptből éred el. Példa:

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>

Miután a felhasználó a képre kattint, a függvény meghívásra kerül changeImge(). Benne az elemet imagea -val kapjuk meg ID, majd az src attribútuma értékét változtatjuk egy újra. Ennek hatására az elem imgúj képet tölt be.

5.2 document.createElement()

Az elem beszerzése mellett új elemeket is létrehozhatunk, illetve a meglévőket törölhetjük is.

Az elemek létrehozása nagyon egyszerű. Ehhez két dolgot kell tennie: a) létrehozni egy elemet , b) hozzáadni a megfelelő helyre a dokumentumban. Általában így néz ki:


<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() metódus

Egy másik nagyon hasznos módszer a window.navigate(). Ezzel kényszerítheti a böngészőt, hogy a jelenlegi helyett új oldalt töltsön be. Csak adja át URLezt a módszert, és hívja. Példa:


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

A fenti példában, miután a felhasználó a képre kattint, a google.com oldal betöltődik az aktuális lapra.

5.4 Jelenlegi URL

És még egy hasznos dolog. Néha egy szkriptnek ismernie kell az aktuális oldal URL-jét. Például ugyanaz a szkript hozzáadható különböző oldalakhoz. Hogyan kell csinálni?

Erre külön tulajdonság van.document.location.href

var currentURL = document.location.href;