How to get a DOM Element from a JQuery Selector

jquery find
jquery each
jquery get element by class
jquery get element by index
jquery get element by id
jquery descendant selector
jquery get html element
jquery create element

I'm having an impossibly hard time finding out to get the actual DOMElement from a jquery selector. Sample Code:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

and in another piece of code I'm trying to determine the checked value of the checkbox.

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

And please, I do not want to do:

  if ( checkbox.eq(0).is(":checked"))
    //do something

That get's me around the checkbox, but other times I've needed the real DOMElement.

You can access the raw DOM element with:

$("table").get(0);

or more simply:

$("table")[0];

There isn't actually a lot you need this for however (in my experience). Take your checkbox example:

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

is more "jquery'ish" and (imho) more concise. What if you wanted to number them?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

Some of these features also help mask differences in browsers too. Some attributes can be different. The classic example is AJAX calls. To do this properly in raw Javascript has about 7 fallback cases for XmlHttpRequest.

.get(), Retrieve the DOM elements matched by the jQuery object. Select all divs in the document and return the DOM Elements as an Array; then use the built-in� Each jQuery object also masquerades as an array, so we can use the array dereferencing operator to get at the list item instead: 1 console.log( $( "li" )[ 0 ] );

Edit: seems I was wrong in assuming you could not get the element. As others have posted here, you can get it with:

$('#element').get(0);

I have verified this actually returns the DOM element that was matched.

How do I select elements when I already have a DOM element , If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object. var myDomElement = document. getElementById( "foo" ); // A plain DOM element. $( myDomElement ). A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation:

I needed to get the element as a string.

jQuery("#bob").get(0).outerHTML;

Which will give you something like:

<input type="text" id="bob" value="hello world" />

...as a string rather than a DOM element.

How to get a DOM Element from a JQuery Selector, You can access the raw DOM element with: $("table").get(0);. or more simply: $(" table")[0];. There isn't actually a lot you need this for however� 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 you need to interact directly with the DOM element, why not just use document.getElementById since, if you are trying to interact with a specific element you will probably know the id, as assuming that the classname is on only one element or some other option tends to be risky.

But, I tend to agree with the others, that in most cases you should learn to do what you need using what jQuery gives you, as it is very flexible.

UPDATE: Based on a comment: Here is a post with a nice explanation: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

This will return the value if it's checked, or 0 if it's not.

$(this).val() is just reaching into the dom and getting the attribute "value" of the element, whether or not it's checked.

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� The #id Selector. The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element. To find an element with a specific id, write a hash character, followed by the id of the HTML element:

jQuery Selectors, jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their name, id,� $( myDomElement ).find( "a"); // Finds all anchors inside the DOM element. Many people try to concatenate a DOM element or jQuery object with a CSS selector, like so: 1

jQuery Get Content and Attributes, jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes. DOM = Document Object Model Get Elements by CSS Selector Syntax. document.querySelector(css_selector) Return a non-live first element that match the CSS selector css_selector. The css_selector is a string of CSS syntax, and can be several selectors separated by comma. document.querySelectorAll(css_selector)

Traversing DOM Elements using jQuery, To begin, specify a selector to get the reference of elements and call each() method with callback function, which will be executed for each element. Example: � Get one or more DOM elements by selector or alias.. The querying behavior of this command matches exactly how $(…) works in jQuery.. Syntax cy. get (selector) cy. get (alias) cy. get (selector, options) cy. get (alias, options)

Comments
  • One case in which this may be needed: in Knockout.js the function applyBindings expects a DOM node not a jQuery selector. This question (and its answers) are exactly what is needed.
  • Thanks, but the get method still returns a jquery element, not the dom element. Otherwise the .checked property call would have worked.
  • Try $('a').get(0).nodeType==1 in Firebug on this page, does it evaluate to true or fail?
  • @BillRob if get() isn't returning the DOM element, something is wrong. See the docs here: docs.jquery.com/Core/get#index
  • $('<input type=checkbox>').appendTo('body').get(0).checked
  • What's the point of using jQuery if you're going to be explicitly using DOM properties? Shouldn't it be better to have consistent code that's error-proof against possible TypeErrors? A few years ago I used to be an elitist ECMAScripter and avoided frameworks but the more I learned about inconsistencies I ended up relying more. Browser engines are only getting faster and faster, unless the speed is noticeable you shouldn't really worry about this. The entire point of using a framework is to have workable consistent code solving many issues, not doing stuff as fast as possible.
  • Repeating myself, but again... not in all browsers. Fails in IE7 and earlier.
  • I could use document.getElementById or the MS ajax $get method. Since MS endorsed jquery I'm trying to break my reliance on ms ajax javascript and learn jquery. It seems entirely counter-intuitive that jquery would change the behavior of the checkbox .val() method. As every other .val() call returns the form post fields. jQuery has been so good to work with so it was confusing to change the val() method and was hoping to find a quick workaround.
  • So check out this page: mail-archive.com/jquery-en@googlegroups.com/msg04461.html
  • That's odd James that the val() method is really .attr("value"). I wonder why they have two different methods for it. To me .val() is the value of the form post field.
  • @BillRob - jQuery is just simplifying, and standardizing, how to get the value, rather than you having to go to the actual element and do it yourself.
  • Sometimes you need a complex selector with IDs and a parent-child scenario and you can get it through jQuery with one line of code, but would take a day to use document.getElementById. I agree that mixing libraries is a bad idea, but it just happens sometimes and the task of getting a DOM element from a jquery object is just hard, especially with .get(0) not having browser compatibility.