JavaScript is used worldwide for the purpose of adding features like behavior and interactivity to a page. We can also manipulate a web page using JS. But one question arises: how does JS manipulate a web page? - JavaScript accesses the DOM to control the page. Using the DOM, JavaScript receives access to the HTML and CSS of a page and can also add behavior to the HTML elements.
Let's understand document object models, their structure, and how to fetch elements in an HTML page by using the getElementById method.
JavaScript getElementById() Method
The getElementById() method is one of the most common methods in the HTML DOM. It returns an Element object representing the element whose id attribute matches the provided string. Since element IDs must be unique if supplied, they're a quick way to obtain a specific element. The method returns null if the element does not exist.
Syntax
element = document.getElementById(ID)
You can also try this code with Online Javascript Compiler
It will return an element object whose ID matches the specified string. If no element exists with the specified ID, it will return null. The "element" variable gets the returned element object. The "ID" represents the id of the element to find.
Parameter
ID: The ID is a case-sensitive string that is unique within the document; each ID should only be assigned to one element. The ID of an element is given as a parameter to the getElementById() method.
Return Value
The getElementById() method returns an element object describing the DOM element object matching the specified ID or null if no matching element was found in the document.
JavaScript getElementById() Method Examples
Example 1
In this example, We will see how we can retrieve an element from its HTML Document by using its ID with the getElementById() method.
It’s implementation in Javascript and HTML
<html>
<head>
<title> Example Number 1</title>
</head>
<body style="background-color:grey;">
<h1 id="main-heading">Coding Ninjas</h1>
<script>
var output = document.getElementById("main-heading");
console.log(output);
</script>
</body>
</html>
By examining the given instance, it's clear that we have an HTML Document containing a Header element. And this element has an ID in the name of the main heading. This method will be used to retrieve the element, and then we will assign it to a variable that goes by the name "output." After that, we can use the console.log method present in JS itself to print the output on the console.
Output:
Page view:
Example 2
We frequently use the getElementById() function to modify the text value of an HTML element. This function retrieves an HTML element from the page based on the unique id attribute specified in the HTML code. In the example below, we use the getElementById() method to retrieve an element from the HTML, and then we will alter its text to some other text.
It’s implementation in Javascript and HTML
<html>
<head>
<title>Example Number 2</title>
</head>
<body style="background-color:grey;">
<h1 id="main-heading">Coding Ninjas</h1>
<button onclick="alterText()">Change Text</button>
<script>
function alterText() {
var output = document.getElementById("main-heading");
output.innerHTML = "Hello Ninjas!";
}
</script>
</body>
</html>
In the above instance, we will clearly note that we have an HTML file that has a heading element, and it has an ID via the name “main heading." And we also have a button element. Whenever the user clicks on the button, it'll call a JS function called alterText(). In the JS code, we used the getElementById() technique to retrieve the heading element and assign it to a variable referred to as output. And then, we will use the innerHTML, which is also provided by JS, to alternate the content of the element that has the ID “main-heading”. And we will change the text from Coding Ninjas to Hello Ninjas.
Output:
Before Clicking on the button:
After Clicking on the Button:
Example 3
The following example shows us that we can also change the style properties of our web page simply by using the document.document.getElementById().
It’s implementation in Javascript and HTML
<html>
<head>
<title>Example Number 3</title>
<style>
#heading {
color: orange;
font-size: 17px;
}
</style>
</head>
<body style="background-color:grey;">
<h1 id="main-heading">Coding Ninjas!</h1>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
var element = document.getElementById("main-heading");
element.style.color = "red";
}
</script>
</body>
</html>
In the above-written code, it's very clear that we have an HTML Document with a heading element that has an ID of “main-heading”. We actually have a button element in order to call a function by the name of "changestyle" when we click on the button. And inside the JS, we are using the getElementById() approach to retrieve the heading element, and then we assign it to a variable called “element”. Then we will change the text color and font size by using the style property.
Output:
Before clicking on the Button:
After clicking on the button:
Document Object Model (DOM)
It is nothing but an API that represents and interacts with HTML files. Whenever a page gets loaded inside a browser, its DOM will automatically be created by the browser. And this DOM, which is created by the browser, will represent the Document in the form of a node tree. In which each node represents a part of the Document. It can be an element, textual content, and so on., simply how that web page was written.
Structure of DOM
DOM has a tree node structure - The DOM represents the Document with the help of a logical tree. The tree is a hierarchical structure in the sense that we have tags inside tags in HTML. For example, the DOM tag is the root node, then and the tags are its children. Like this, we have tags inside both and tags as their children. Every branch of the tree will end in a node, and every node contains some objects. DOM methods will allow programmatic access to the tree; with the help of these, we can change the structure of the Documents, style, or content.
The JavaScript function getElementById() allows you to get an HTML element by its id and perform an action on it. The id's name is supplied as a parameter, and the relevant element is returned.
How to get value by id in JS?
To get the value of an HTML element by its id in JavaScript, use the getElementById() method along with the relevant property, depending on the type of element you're targeting.
How to get DOM element in JavaScript?
There are multiple ways to get the dom element in JavaScript. Some of the methods are getelementbyId, getElementsByClassName, querySelector and querySelectorAll, getElementByName and many other.
Conclusion
The getElementByID() is a method in JS. It is one of the most used methods present in javascript. The method will return a DOM element that is specified by an id. But if there are no matching elements, then the method will return null. A proper understanding of syntax parameters and the return value of this method allows developers to create dynamic and interactive web pages that are both functional and visually appealing to people.
If you want to learn about Javascript with HTML, refer to the article. You can also consider our paid courses to give your career an edge over others.
Do upvote our blogs if you find them helpful and engaging! Happy Learning!
116+ registered 