How to get a DOM Element from a jQuery Selector ? Last Updated : 12 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The Document Object Model (DOM) elements are something like a DIV, HTML, BODY element on the HTML page. A jQuery Selector is used to select one or more HTML elements using jQuery. Mostly we use Selectors for accessing the DOM elements. If there is only one particular unique element in the HTML page we can access it by it's tag as $("tag"), but when we have more than one of its kind then we will access them with the ID that when $("#id") comes into play. But if we want to use the raw DOM elements then we can convert them into javascript objects in that way we can use them for methods present in javascript but not in jquery. Syntax $(“selector”).get(0) or $(“selector”)[0] Below examples illustrates the approach. Example 1: This example will use the $(“selector”).get(0): JavaScript <!DOCTYPE html> <html> <head> <title>The jQuery DOM elements Example</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script> $(document).ready(function() { // Access with tag $("p").css("color", "red"); $("button").click(function() { // Access with id $("#d1").css("color", "purple"); $("#d2").css("color", "green"); $("#d3").css("color", "black"); // Converting into javascript object. $("#d4").get(0).reset(); }); }); </script> </head> <body style="text-align:center;"> <div> <h4 id="d1">Hello</h4> <h1 id="d2">GeeksforGeeks</h1> <h3 id="d3"> A Computer Science Portal for Geeks </h3> <form id="d4"> Enter name: <input type="text" /> </form> <br> <button>Button</button> <br> <p> Clicking button will Resets the textbox and changes the background colors of the above texts. </p> </div> </body> </html> Output: As the reset() method is not available in jquery we have converted the jquery element into a javascript object or into raw DOM elements. Example 2: This example will illustrate the use of $(“selector”)[0] selector. JavaScript <!DOCTYPE html> <html> <head> <title>The jQuery Example</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script> $(document).ready(function() { // Access with tag $("h1").css("color", "green"); $("button").click(function() { // d1 gets replaced with d4. $("#d1")[0].outerHTML = "<h3 id='d4'>A Computer Science Portal for Geeks</h3>"; $("#d4").css("color", "black"); }); }); </script> </head> <body> <center> <div> <h1 id="d1">Hello Welcome to GeeksforGeeks</h1> <button>Button</button> <br> <h4> The above button changes the content of the above text. </h4> </div> </center> </body> </html> Output: Note: As outerHTML is the HTML of an element including the element itself is not available in jquery. We have converted the jquery element into a javascript object or into raw DOM elements to access outerHTML and replace it with another heading. Comment More infoAdvertise with us Next Article How to select element by ID in jQuery ? T Tejashwi5 Follow Improve Article Tags : Technical Scripter Web Technologies JQuery jQuery-Misc Similar Reads How to select element by ID in jQuery ? In this article, we are going to see how to select the element by its id using jQuery. To learn about this topic one should have prior knowledge about HTML, CSS, JavaScript and jQuery. Using JavaScript: This question is also solved by a popular JavaScript method called document.getElementById() whic 2 min read How to select all ancestors of an element in jQuery ? In this article, we will select all the ancestor elements of an element in jQuery. To select all ancestor elements of an element, the parents() method is used. This method is used to find all the parent elements related to the selected element. This method traverses all the levels up the selected el 1 min read How to select direct parent element of an element in jQuery ? In this article, we will select the direct parent element of an element using jQuery. To select the direct parent element, the parent() method is used. This method finds the parent element related to the selected element. This parent() method traverses a single level up the selected element and retu 1 min read How to select an element by name with jQuery ? Selecting an element by name with jQuery allows you to target HTML elements using their `name` attribute. This method is commonly used in form handling, where input fields, checkboxes, or radio buttons share the same name, enabling you to easily manipulate or retrieve their values.Table of ContentUs 3 min read How to select elements by attribute in jQuery ? jQuery is a lightweight JavaScript library. In the vanilla JavaScript language, the getElementById method is used to select an element. However, jQuery provides a much lighter alternative for the same purpose. The 'jQuery Selector' allows the user to manipulate HTML elements and the data inside it(D 2 min read How to select all sibling elements of an element using jQuery ? In this article, we will discuss how to select all sibling elements of an element using jQuery. To select all sibling elements of an element, we will use the siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same 2 min read Like