How to get a DOM Element from a jQuery Selector ?

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 eaxmple will use the $(“selector”).get(0):

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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 eaxmple will illustrates the use of $(“selector”)[0] selector.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.