How to get a DOM Element from a jQuery selector?

by

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.

More Related Contents:

  1. How do I select text nodes with jQuery?
  2. Check if an image is loaded (no errors) with jQuery
  3. How to hide a in a menu with CSS?
  4. Firing event on DOM attribute change
  5. jQuery object and DOM element
  6. Find DOM element by ID when ID contains square brackets?
  7. How to expose IFrame’s DOM using jQuery?
  8. Finding line-wraps
  9. How to get the element clicked (for the whole document)?
  10. How to check if an embedded SVG document is loaded in an html page?
  11. AngularJS: How to run additional code after AngularJS has rendered a template?
  12. Is there any “on DOM change” event? [duplicate]
  13. How do I monitor the DOM for changes?
  14. jQuery events .load(), .ready(), .unload()
  15. change html text from link with jquery
  16. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  17. How to dynamic filter options of with jQuery?
  18. How to stop event bubbling with jquery live?
  19. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  20. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  21. DOM Mutation event in JQuery or vanilla Javascript
  22. Uncaught TypeError: Cannot read property ‘top’ of undefined
  23. How to remove DOM elements without memory leaks?
  24. How can I get access to a Highcharts chart through a DOM-Container?
  25. How can I remove wrapper (parent element) without removing the child?
  26. Unloading/Removing content from an iFrame
  27. jQuery difference between :eq() and :nth-child()
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment