JavaScript can access every part of the HTML DOM(Document Object Model) and change the web-page or add event listeners.
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The HTML DOM can be accessed by the JavaScript language. We have properties and methods on DOM.
Let’s take a look at the dom example. Here, we have both property and method.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo"></h1>
<script>
document.getElementById('demo').innerHTML = 'Hello JavaScript!';
</script>
</body>
</html>This method getElementById is used to get the object containing the HTML element with the given id. In the above example, we are calling document.getElementById('demo'), so it will return <h1 id="demo"></h1>
We can verify the same from the console for the web page, we created above.
This method innerHTML is used for getting or replacing the content of HTML elements. In the above example, we change the content of the <h1> tag. You can think of it changing the things inside the <h1> tag, which in the above example was empty.
We need to access HTML elements to work on it. We have already seen many examples of getElementById but there are some more also.
We have already seen an example in the previous topic of DOM Methods for getting element by Id using getElementById
The method getElementsByTagName selects all tags of a given type in the web-page and return an array like object called HTMLCollection. In the below example we are getting the HTMLCollection in “var x”. Since there are two <p> tags in the page we can access them by x[0] and x[1].
<!DOCTYPE html>
<html>
<body>
<p>Hello JS!</p>
<p>This example is for you all JS People.</p>
<div id="demo"></div>
<script>
var x = document.getElementsByTagName('p');
document.getElementById('demo').innerHTML =
x[0].innerHTML + ' ' + x[1].innerHTML;
</script>
</body>
</html>Output with console
<!DOCTYPE html>
<html>
<body>
<p class="intro">Hello JS!</p>
<p class="intro">This example is for you all JS People.</p>
<div id="demo"></div>
<script>
var x = document.getElementsByClassName('intro');
document.getElementById('demo').innerHTML =
x[0].innerHTML + ' ' + x[1].innerHTML;
</script>
</body>
</html>We can use the more modern querySelector method to match a specified CSS Selector(id, class). The only difference from getElementById is that we need to add # for id or for class as we do in CSS.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo"></h1>
<script>
document.querySelector('#demo').innerHTML = 'Hello JavaScript!';
</script>
</body>
</html>We can use the querySelectorAll method to find HTML elements which match a specified CSS Selector(id, class). It returns an array like object called as NodeList. It can be used in place of getElementsByClassName or getElementsByTagName.
<!DOCTYPE html>
<html>
<body>
<p>Hello JS!</p>
<p>This example is for you all JS People.</p>
<div id="demo"></div>
<script>
var x = document.querySelectorAll('p');
document.getElementById('demo').innerHTML =
x[0].innerHTML + ' ' + x[1].innerHTML;
</script>
</body>
</html>Output with console
We can also change the CSS style of an HTML element. Below is an example of the same. Notice, that for CSS property like font-size, we have to use camel case like fontSize.
<!DOCTYPE html>
<html>
<body>
<div id="title">Hello JS!</div>
<p id="para">This example is for you all JS People.</p>
<script>
document.querySelector("#title").style.fontSize = "22px";
document.querySelector("#para").style.color = "blue";
</script>
</body>
</html>Output
I have learned many things from this article. It is beneficial for me. Thank you!
Nice example for beginners.. I m a beginner so this is very helpful for me ... so plz give this type of beginners example..
This is a great introduction to variables in JavaScript! As a beginner to JavaScript, I found this guide very helpful in understanding the basics of variables and how they are used in JavaScript.
Thanks for sharing the information, it is very helpful, I hope to get more such beautiful blogs from you.
You have shared great information with me i appreciate your work!
Build various types of web applications,command-line application,etc....
Introduction: Angular (What is Angular?)Angular was formerly introdu...
Leave a Reply
Your email address will not be published. Required fields are marked *