getElementById and JQuery not returning same result

I'm not getting the same result when I use JQuery vs javascript functions.

This is the HTML

<form id="testform">
  <div id="FormContainerID"></div>
  <input type="button" id="y" value="Button" />
  <div id="ListContainerID"></div>
</form>

Here is the Javascript

01   var Form = document.getElementById('y').form;
02 //var Form = $('#y').closest('form');
03   alert(Form);

When Activating row 1, I get a legal form object. The Alert says "object HTMLFormElement" and everything works fine.

But if I use row 02 instead, Alert says "object Object" and then I ofcourse get errors becaus it isn't a real Form object.

Why is JQuery not returning the correct Object? I get the same result with Chrome and开发者_如何学Python IE8.

[EDIT]

I'm using JQuery version: jquery-1.5.1.min

[SOLUTION]

Thank you for clearing this up. I Changed the code to:

var Form = $('#'+fChildID).closest('form')[0];

...and now it works as a charm.

Vivek Goel was the first to answer, so creds to him. I voted up you other guys that explained the JQuery instance model.

Thank you.

---

jQuery returns a jQuery instance when you use it to look things up, not the raw DOM element. The jQuery instance is a wrapper around the set of matched elements, and allows you to apply set-based operations to the elements. This is one of the absolute fundamentals of using jQuery.

You can also access the raw elements if you like using array-like notation — [0], [1], etc., up to .length - 1. So in your case, since you're getting just one element, it would be Form[0]. If your code matched multiple form elements, it would be Form[1] for the second one, Form[2] for the third one, etc. (Using the [] notation is surprisingly hard to find in the documentation, though, one of the gaps in my view; in the old days you used the get method, but you only need that now if you're using its special handling for negative indexes.)

You frequently don't need to access the raw elements at all. You haven't said what you're going to do with the form once you have it, but if you were to (say) submit it, just call the submit function on the jQuery instance, and it will submit the form. If you wanted to get an attribute from it, there's the attr jQuery function (so for instance, val = Form.attr("action")).

jQuery is very set-based, but it's assymetrical, which feels weird at first but works fairly well in practice. When getting a value, functions usually get the value from the first matched element only. When setting a value, functions usually set it on all the matched elements.

---

This is because the jquery statement is returning a jquery object and not a form object. You need something like Form[0] to access the form element.

---

with jquery use

 alert(Form[0]);

http://jsfiddle.net/dvCtr/

---

Try

var form = $("#y").parent

this should return the parent of yin the DOM tree