5.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" src="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 src="big-image.png" onclick="window.navigate('https://google.com');">
</body>
В примере выше, после того как пользователь кликнет на картинке, в текущую вкладку загрузится страница google.com.
5.4 Текущий URL
И еще одна полезная вещь. Иногда скрипту бывает очень нужно узнать текущий URL страницы. Например, один и тот же скрипт может быть добавлен в разные страницы. Как это сделать?
Для этого есть специальное свойство document.location.href
var currentURL = document.location.href;
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
вфпфпаи