jQuery object and DOM element

by

I would like to understand relationship between jQuery object and DOM element

A jQuery object is an array-like object that contains DOM element(s). A jQuery object can contain multiple DOM elements depending on the selector you use.

Also what methods can operate on jQuery object vs DOM element? Can a single jQuery object represent multiple DOM elements ?

jQuery functions (a full list is on the website) operate on jQuery objects and not on DOM elements. You can access the DOM elements inside a jQuery function using .get() or accessing the element at the desired index directly:

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

In other words, the following should get you the same result:

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

For more information on the jQuery object, see the documentation. Also check out the documentation for .get()

More Related Contents:

  1. How do I check if an element is hidden in jQuery?
  2. jQuery. Find all attribute values within/under elements `script or noscript or iframe` that have attribute keys as `src or href` [closed]
  3. Why does jQuery or a DOM method such as getElementById not find the element?
  4. How do I set/unset a cookie with jQuery?
  5. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  6. How may I sort a list alphabetically using jQuery?
  7. Detect element content changes with jQuery
  8. How can I select an element by name with jQuery?
  9. If a DOM Element is removed, are its listeners also removed from memory?
  10. What is the most efficient way to create HTML elements using jQuery?
  11. Firing event on DOM attribute change
  12. Difference between HTMLCollection, NodeLists, and arrays of objects
  13. How to show Page Loading div until the page has finished loading?
  14. How to bind bootstrap popover on dynamic elements
  15. How to show a spinner while loading an image via JavaScript
  16. How to move an iFrame in the DOM without losing its state?
  17. Get the DOM path of the clicked
  18. How to move table row in jQuery?
  19. Can I change an HTML element’s type?
  20. JavaScript scrollTo method does nothing?
  21. Select div using wildcard ID
  22. how to compare two elements in jquery [duplicate]
  23. How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?
  24. getElementById returning value only for first element [closed]
  25. querySelector vs. getElementById [closed]
  26. How to add DOM element script to head section?
  27. Delaying a jquery script until everything else has loaded
  28. User Activity Tracking using javascript library [closed]
  29. Best practice to avoid memory or performance issues related to binding a large number of DOM objects to a click event
  30. Removing element with jQuery?

Leave a Comment