5.1 document.getElementById()

Как ты знаешь, JavaScript создали для того, чтобы добавить немного анимации на HTML-страницы. Пока мы практически ничего не сказали об этом. Как же добавить эту самую анимацию? Как, например, поменять цвет какого-нибудь элемента?

Чтобы поменять цвет элемента, сначала нужно этот элемент найти. Для этого есть функция document.getElementById(); Ты в твоем HTML прописывай id у нужного элемента, а затем обращаетесь к нему из JavaScript. Пример:

Java-университет 

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

Кроме получения элемента, мы можем еще создавать новые элементы и удалять существующие.

Создавать элементы очень просто. Для этого нужно сделать два действия: а) создать элемент, б) добавить его в нужное место документа. Выглядит это обычно примерно так:


<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(). С его помощью ты можешь заставить браузер загрузить новую страницу вместо текущей. Просто передай ее URL в этот метод и вызови его. Пример:


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

В примере выше, после того как пользователь кликнет на картинке, в текущую вкладку загрузится страница google.com.

5.4 Текущий URL

И еще одна полезная вещь. Иногда скрипту бывает очень нужно узнать текущий URL страницы. Например, один и тот же скрипт может быть добавлен в разные страницы. Как это сделать?

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


var currentURL = document.location.href;