1. document.getElementById()

Як ти вже знаєш, JavaScript створили, щоб додати трохи анімації на HTML-сторінки. Поки що ми практично нічого не сказали про це. Як додати цю анімацію? Як, наприклад, змінити колір якогось елемента?

Щоб змінити колір елемента, спочатку потрібно знайти цей елемент. Для цього є функція document.getElementById();: ти в своєму HTML прописуєш id у певного елемента, а потім звертаєшся до нього із JavaScript. Приклад:


<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-університет

Після того, як користувач клікає мишкою по картинці, викликається функція changeImage(). У неї всередині ми отримуємо елемент image за його ID, а потім змінюємо у нього значення атрибута src на нове. Це призведе до того, що елемент img завантажить нову картинку.

2. document.createElement()

Окрім отримання елемента, ми можемо створювати нові елементи і видаляти ті, які вже існують.

Створювати елементи дуже легко. Для цього потрібно зробити дві дії: а) створити елемент; б) додати його в потрібне місце документа. Виглядає це приблизно так:


<head>
    <script>
        window.onload = function ()   {
            var image = document.createElement("IMG");
            var image.src = "big-image.png";
            document.body.addAfter(image);
        }
    </script>
</head>
<body>
</body>

3. Метод window.navigate()

Є ще один дуже корисний метод – window.navigate(). За його допомогою ти можеш змусити браузер завантажити нову сторінку замість поточної. Просто передай її URL до цього методу і виклич його. Приклад:


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

У прикладі вище після того, як користувач клікне на картинці, у поточній вкладці завантажиться сторінка google.com.

4. Поточний URL

І ще одна корисна річ. Іноді скрипту дуже треба дізнатися про поточний URL сторінки. Наприклад, той самий скрипт можна додати до різних сторінок. Як це зробити?

Для цього є спеціальна властивість document.location.href


var currentURL = document.location.href;