Javascript - getElementById() Function

In this blog, we are going to learn in detail about the inbuilt function of javascript getElementById().

Introduction

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.

Syntax

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.

textContent

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

Example

<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');
console.log(text.textContent);

Output

Hi, This is Jay Krishna Reddy

Hidden text 

innerText

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;

console.log(text.innerText);

Output

Hi, This is Jay krishna Reddy

Conclusion

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 ...!