Javascript - getElementById() Function


Today we are going to learn about the Javascript inbuilt function which we  commonly use in our everyday programming life. This is for those who frequently work with FrontEnd stack, and document.getElementById() returns an element object that represents an HTML element with an Id that matches a specified string.


Let us take some examples to demonstrate.

const id = document.getElementById(Id);
  1. Id which we are using in the above example is a string that represents the id of the element to select.
  2. Id is case-sensitive.
  3. Id is unique within an HTML Element.
console.log(type of element);

The above console actually returns the object value.

If the document has no element with the specified id, the document.getElementById() returns null value.


The textContent is a property of the HTML and it returns the concatenation of the textContent of every child node, excluding comments.


<p id= "text">Hi, This is Jay Krishna Reddy 
   <span style="display:none">Hidden text</span> </p>

Js Output

Here we can see the output in the browser console window

const text = document.getElementById('name');


Hi, This is Jay Krishna Reddy

Hidden text 


The innerText returns the human-readable text that takes CSS into account. By using the above example let's see the output by using the innerText;



Hi, This is Jay krishna Reddy


Thank you for reading, I hope this article gives you a brief idea about the inbuilt function of Javascript with clear code samples.

Please let me know your questions, thoughts, or feedback in the comments section. I appreciate your feedback and encouragement.

Keep learning ...!