5.1 dokument.getElementById()

Jak wiesz, JavaScript został stworzony w celu dodania animacji do stron HTML. Jak dotąd niewiele o tym mówiliśmy. Jak dodać tę samą animację? Jak na przykład zmienić kolor elementu?

Aby zmienić kolor elementu, musisz najpierw znaleźć ten element. Aby to zrobić, istnieje funkcja document.getElementById();Piszesz w kodzie HTML idw żądanym elemencie, a następnie uzyskujesz do niego dostęp z JavaScript. Przykład:

<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>
Java webinar

Po kliknięciu przez użytkownika w obrazek funkcja jest wywoływana changeImge(). Wewnątrz niego pobieramy element imageprzez jego ID, a następnie zmieniamy wartość jego atrybutu src na nową. Co spowoduje, że element imgzaładuje nowy obraz.

5.2 document.createElement()

Poza otrzymaniem elementu możemy również tworzyć nowe elementy oraz usuwać istniejące.

Tworzenie elementów jest bardzo proste. W tym celu należy wykonać dwie czynności: a) utworzyć element , b) dodać go w odpowiednie miejsce w dokumencie. Zwykle wygląda to tak:

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

Inną bardzo przydatną metodą jest tzw window.navigate(). Dzięki niemu możesz zmusić przeglądarkę do załadowania nowej strony zamiast bieżącej. Po prostu przekaż URLto tej metodzie i wywołaj ją. Przykład:

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

W powyższym przykładzie po kliknięciu przez użytkownika obrazu strona google.com zostanie załadowana do bieżącej karty.

5.4 Bieżący adres URL

I jeszcze jedna przydatna rzecz. Czasami skrypt musi znać adres URL bieżącej strony. Na przykład ten sam skrypt można dodać do różnych stron. Jak to zrobić?

Jest do tego specjalna właściwość.document.location.href

var currentURL = document.location.href;