Open In App

How to get a DOM Element from a jQuery Selector ?

Improve
Improve
Like Article
Like
Save
Share
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=
    </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=
    </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.
 



Last Updated : 10 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads