How can I get jQuery to return the native DOM elements it encapsulates?
5
-
1What else would you do with jQuery selectors besides "manipulate elements"? I mean, your question seems basically like, "Can I use jQuery?" to which the answer would be, "yes."Pointy– Pointy2010-02-24 14:30:41 +00:00Commented Feb 24, 2010 at 14:30
-
Why do you want to do this? And no, your expression won't work since $("cheese_tag") will return a jQuery object.alexn– alexn2010-02-24 14:31:04 +00:00Commented Feb 24, 2010 at 14:31
-
Sorry, a better way to state my question would be "Can I convert jQuery objects to ones that normal javascript can manipulate?" as in get jQuery to return a javascript object for manipulation.mattsven– mattsven2010-02-24 14:33:14 +00:00Commented Feb 24, 2010 at 14:33
-
This question makes no sense to me .. why would you use ordinary selectors when jquery is lot shorter and fasterant– ant2010-02-24 14:41:03 +00:00Commented Feb 24, 2010 at 14:41
-
Because sometimes using native javascript functions to get objects might end up being quite lengthy so using jquery to get the objects is faster than javascript, but actually calling javascript functions is faster than jquery because jquery calls the same functions after calling several of its own beforehand. This means that using plain javascript on jquery selected elements would be faster than full jquery and in some cases just as easy to write.eragon2262– eragon22622016-08-26 16:45:33 +00:00Commented Aug 26, 2016 at 16:45
Add a comment
|
6 Answers
When you find elements with jQuery, you can get them with the "get" function:
var regularElement = $('#myElementId').get(0);
Inside a ".each()" function, the "this" pointer refers to a "real" element:
$('input.special').each(function() {
var type = this.type;
this.value = "exploding balloon";
// etc
})
Using jQuery doesn't make Javascript "different." It is Javascript, and the DOM is still the DOM.
1 Comment
Wally Lawless
It took me a minute to understand why you were using the get() function on the jquery object, but then I read the comments on the question itself. It makes sense now. I can see get() being useful when integrating with non-jQuery JavaScript.
$('myTag').get(0) returns the HTML element.
Comments
jQuery uses the Sizzle Selector Engine*. You can use it on its own too.
* Confirmed by Doug Neiner, which means it's right ;)
3 Comments
Doug Neiner
Right! Simply include sizzle.js, then add this line:
window.$ = window.Sizzle. And $("cheese_tag") will return [<domelement>]. $("#cheese_id")[0] === document.getElementById("cheese_id")
Sampson
What, no "I'm Doug Neiner and I approve this answer"? Hehe.
Doug Neiner
I'm Doug Neiner and I approve this answer
There are two ways, according to jQuery documentation:
Way #1
$("#ID-DOM-Element")[0]
Way #2
$("#ID-DOM-Element").get(0)
Important detail mentioned in the jQuery documentation: Way #1 is faster than Way #2.
Comments
I assume you're trying to check if your jQuery object is the first instance of "cheese_tag". You can find the first tag with the :first selector and then you wouldn't need to do the comparison. For example, get the first div tag would be: $('div:first').
For the complete list of jQuery selectors, see the documentation.
1 Comment
mattsven
Not exactly...I wanted to get a javascript HTML element object as the return.
Other people have already directly answered the question. Use the get() method.
However, most of the time you want to use jQuery methods to do the manipulation as opposed to getting access to the raw DOM element and then modifying it using "standard" JavaScript.
For example, with jQuery you can just say $('mySelector').addClass('myClass') to add a CSS class to a DOM element. This is much more complicated (and browser specific) using direct DOM manipulation. This concept extends to almost every other DOM manipulation you would care to do.
