How do i get the html element?
|
As a JavaScript programmer, you may need to manipulate the added HTML elements without modifying the HTML code. In this case, you can find, get, and then update the HTML elements without overwriting them. The HTML Document Object Model (DOM) offers various ways to find and get HTML elements in JavaScript. This write-up will discuss the procedures of finding and getting HTML elements in JavaScript. Moreover, the examples related
to getElementById(), getElementsByTagName(), getElementsByClassName(), and querySelectorAll() methods will be demonstrated in this article. So, let’s start! Most of the JavaScript developers utilized the getElementById() method for finding and getting HTML elements having unique ids. If you have passed an id that does not belong to any HTML element, the getElementById() method will display the null value. document.getElementById(elementId)
Here, the “elementId” represents the unique ID of the HTML element which you want to find and get in your JavaScript code. We will add HTML elements such as a heading with the tag in the following example. Note that we have also added “ids” with the paragraph elements:
<html> <body> <h2>This is linuxhint.com</h2>
<p id="p1">Find and Get HTML elements by Id in JavaScript</p> <p>This is a JavaScript program that utilizes the
"getElementsById" method</p> <p id="p2"></p> In the next step, we will find and get the element having the id
“p1” by using the “document.getElementById()” method. After ding so, we will change the content of the retrieved HTML element: <script> const element = document.getElementById("p1"); document.getElementById("p2").innerHTML =
"The text of the first paragraph is: " + element.innerHTML; script> body> html> Execute the above-given program in your favorite code editor or any online coding sandbox; however, we will utilize the JSBin for this purpose: Execution of the above-given JavaScript program will show the following output: How to Find and Get HTML elements by TagName in JavaScriptYou can utilize the “getElementsByTagName()” JavaScript method for finding and getting a specific HTML element by its tag name. Syntax of getElementsByTagName() methoddocument.getElementsByTagName(tagName) Here, the tagName represents the tag name of the HTML element which you want to retrieve. Example: Find and Get HTML elements by TagName in JavaScriptThe below-given example will find and get all HTML elements having the tag name “p” using the getElementsByTagName() method. After that, it will display the content of the HTML present at the first index of the object collection: <html> <body> <h2>This is linuxhint.com</h2> <p>Find and Get HTML elements by Tag Name in JavaScript</p> <p>This is a JavaScript program that utilizes the "getElementsByTagName" method</p> <p id="p1"></p> <script> const element = document.getElementsByTagName("p"); document.getElementById("p1").innerHTML = 'Main paragraph text (index 0) is: ' + element[0].innerHTML; </script> </body> </html> As you can see, the text of the first paragraph of our JavaScript program is displayed successfully: How to Find and Get HTML elements by ClassName in JavaScriptThe “getElementsByClassName()” method is used for finding and getting HTML elements having the same class. By utilizing the class name, when you try to get an HTML element, the JavaScript interpreter will return all objects belonging to the same class. After that, you can perform specific operations on those HTML elements. Syntax of getElementsByClassName() methoddocument.getElementsByClassName(className) Here, the “className” represents the class name of the HTML elements which you are required to find and get in your program. Example: Find and Get HTML elements by ClassName in JavaScriptIn the following example, we have added a heading and some paragraph elements with the className “c1”: <html> <body> <h2>This is linuxhint.com</h2> <p>Find and Get HTML elements by Class Name in JavaScript</p> <p class="c1">text in first paragrpah</p> <p class="c1">text in second paragraph</p> <p id="p1"></p> Next, we will search for the HTML elements which have “c1” as their class by using the getElementsByClassName() method and will store the collections of the objects in “a”: <script> const a = document.getElementsByClassName("c1"); After finding and getting the required HTML elements, we will show the content of the first object present at the first index: document.getElementById("p1").innerHTML = 'The first paragraph (index 0) with class="c1" is: ' + a[0].innerHTML; script> body> html> Here is the output which we got from executing the above-given JavaScript program: How to Find and Get HTML elements by CSS selector in JavaScriptIn HTML, the querySelectorAll() method returns a static NodeList object that comprises a collection of the child elements of an element matched with the specified CSS selectors. Index numbers are used to find and get the nodes, starting at 0. Syntax of querySelectorAll() methodelement.querySelectorAll(selectors) The querySelectorAll() method takes “selectors” as an argument, a DOM string comprises one or more valid CSS selectors. Example: Find and Get HTML elements by CSS selector in JavaScriptIn the below-given JavaScript program, we have used the querySelectorAll() method to find and get the paragraph HTML elements having “c1” as their class name: <html> <body> <h2>This is linuxhint.com</h2> <p>Find and Get HTML elements by Class Name in JavaScript</p> <p class="c1">text in first paragrpah</p> <p class="c1">text in second paragraph</p> <p id="p1"></p> <script> const a = document.querySelectorAll("p.c1"); document.getElementById("p1").innerHTML = 'The first paragraph with class="c1" is: ' + a[0].innerHTML; </script> </body> </html> Check out the output of the JavaScript querySelectorAll() method: ConclusiongetElementById(), getElementsByTagName(), getElementsByClassName(), and querySelectorAll() are the most common JavaScript methods that are used to find and get elements in a JavaScript program. You can use any of the mentioned method to search for a specific HTML element in the code. This write-up discussed the procedures of finding and getting HTML elements in JavaScript. Moreover, the examples related to getElementById(), getElementsByTagName(), getElementsByClassName(), and querySelectorAll() methods are also demonstrated in this article. About the authorI am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching. |
