5.1 document.getElementById()

Както знаете, JavaScript е създаден, за да добави малко анимация към HTML страници. Досега не сме казали много за това. Как да добавя същата тази анимация? Как например да промените цвета на елемент?

За да промените цвета на даден елемент, първо трябва да намерите този елемент. За да направите това, има функция document.getElementById();, която пишете във вашия HTML idв желания елемент и след това го осъществявате от JavaScript. Пример:

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>

След като потребителят щракне върху изображението, функцията се извиква changeImge(). Вътре в него получаваме елемента imageчрез неговия IDи след това променяме стойността на неговия src атрибут на нов. Което ще накара елемента imgда зареди ново изображение.

5.2 document.createElement()

В допълнение към получаването на елемент, можем също да създаваме нови елементи и да изтриваме съществуващи.

Създаването на елементи е много лесно. За да направите това, трябва да направите две неща: а) да създадете елемент , б) да го добавите на правилното място в documentа. Обикновено изглежда така:


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

Друг много полезен метод е window.navigate(). С него можете да принудите браузъра да зареди нова page instead of текущата. Просто го предайте URLна този метод и го извикайте. Пример:


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

В примера по-горе, след като потребителят кликне върху изображението, pageта google.com ще бъде заредена в текущия раздел.

5.4 Текущ URL

И още нещо полезно. Понякога скриптът трябва да знае текущия URL address на pageта. Например един и същ скрипт може да се добавя към различни страници. Как да го направим?

За това има специално свойство.document.location.href

var currentURL = document.location.href;