How to get a DOM Element from a jQuery Selector ? - GeeksforGeeks

07 Nov, 2020
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="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. 
Vijay Sirra
jQuery-Misc
Picked
JQuery
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
How to get the value in an input text box using jQuery ?
Difference Between JavaScript and jQuery
QR Code Generator using HTML, CSS and jQuery
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?