How to get all ID of the DOM elements with JavaScript ?
Given a HTML document and the task is to get the all ID of the DOM elements in an array. There are two methods to solve this problem which are discusses below:
Approach 1:
- First select all elements using $(‘*’) selector, which selects every element of the document.
- Use .each() method to traverse all element and check if it has ID.
- If it has ID then push it in the array.
Example: This example implements the above approach.
<!DOCTYPE HTML> <html> <head> <title> How to get all ID of the DOM elements with JavaScript ? </title> <script src= </script> </head> <body style="text-align:center;"> <h1 style="color: green"> GeeksForGeeks </h1> <p id="GFG_UP"></p> <button onclick="gfg_Run()"> Click Here </button> <p id="GFG_DOWN" style="color:green;"></p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on the button to get " + "all IDs in an array."; function gfg_Run() { var ID = []; $("*").each(function() { if (this.id) { ID.push(this.id); } }); el_down.innerHTML = ID; } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Approach 2:
- First select all elements using $(‘*’) selector, Which selects every element of the Document.
- Use .map() method to traverse all element and check if it has ID.
- If it has ID then push it in the array using .get() method.
Example 2: This example implements the above approach.
<!DOCTYPE HTML> <html> <head> <title> How to get all ID of the DOM elements with JavaScript ? </title> <script src= </script> </head> <body style="text-align:center;"> <h1 style="color: green"> GeeksForGeeks </h1> <p id="GFG_UP"></p> <button onclick="gfg_Run()"> Click Here </button> <p id="GFG_DOWN" style="color:green;"></p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on the button to " + "get all IDs in an array."; function gfg_Run() { var ID = []; ID = $("*").map(function() { if (this.id) { return this.id; } }).get(); el_down.innerHTML = ID; } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
.png)
.png)