CODEWITHSUNDEEP
javascriptjquerycss-selectorselement
mattsven
mattsven

Reputation: 23253

Retrieving native DOM elements from jQuery objects?

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

Upvotes: 18

Views: 10683

Answers (6)

Ppica88
Ppica88

Reputation: 69

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.

Upvotes: 2

Sampson
Sampson

Reputation: 268344

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

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

Upvotes: 2

RationalGeek
RationalGeek

Reputation: 9599

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.

Upvotes: 0

wsanville
wsanville

Reputation: 37516

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.

Upvotes: 0

user113716
user113716

Reputation: 322492

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

Upvotes: 2

Pointy
Pointy

Reputation: 413720

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.

Upvotes: 34

Related Questions