Retrieving native DOM elements from jQuery objects?

Question

How can I get jQuery to return the native DOM elements it encapsulates?

Answer 1

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.

Answer 2

$('myTag').get(0) returns the HTML element.

Answer 3

jQuery uses the Sizzle Selector Engine*. You can use it on its own too.

^{* Confirmed by Doug Neiner, which means it's right ;)}

Answer 4

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.

Answer 5

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.