5.1 document.getElementById()
As you know, JavaScript was created to add some animation to HTML pages. So far, we haven't said much about it. How to add this same animation? How, for example, to change the color of an element?
To change the color of an element, you first need to find this element. To do this, there is a function document.getElementById();
You write in your HTML id
at the desired element, and then access it from JavaScript. Example:
<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>
After the user clicks on the image, the function is called changeImge()
. Inside it, we get the element image
by its ID
, and then change the value of its src attribute to a new one. Which will cause the element img
to load a new image.
5.2 document.createElement()
In addition to getting an element, we can also create new elements and delete existing ones.
Creating elements is very easy. To do this, you need to do two things: a) create an element , b) add it to the right place in the document. It usually looks like this:
<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() method
Another very useful method is the window.navigate()
. With it, you can force the browser to load a new page instead of the current one. Just pass it URL
to this method and call it. Example:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
In the example above, after the user clicks on the image, the page google.com will be loaded into the current tab.
5.4 Current URL
And one more useful thing. Sometimes a script needs to know the current page URL. For example, the same script can be added to different pages. How to do it?
There is a special property for this.document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION