Skip to content
Related Articles

Related Articles

How to get a DOM Element from a jQuery Selector ?
  • Last Updated : 07 Nov, 2020
GeeksforGeeks - Summer Carnival Banner

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 they are 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.
 

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :