[RESOLVED] document.getElementById vs document.forms

What is the difference between the two of these? I always assumed it was just a different way of getting the same object.

Now I find myself, more often than not, having to use document.forms to get values from items such as a radio button or a text area.

Could someone explain to me why this happens?

E.g) On a project I am working on, I have a textarea I want to validate.

document.getElementById("reason").value returns 'undefined'
document.forms[0].reason.value returns the actual value


Any feedback is appreciated.

If reason is a textarea, I think you should use .innerHTML not .value .
If reason is input type text, then both should return the value .

Wow, .value works fine, but attempting to use .innerHTML showed me that I was a retard and had my Div above the textarea also with an ID of "reason."

My question still stands though, since I have ran into this in many other situations where document.forms[] seems to have more functionality than document.getElementById

Quote:

---

Originally Posted by kfcSmitty

I always assumed it was just a different way of getting the same object.

---

That is all.

document.forms is part of the DOM specification and so should not be unnecessarily avoided in favour of getElementById. Use whatever is easier.

The innerHTML property, on the other hand, should be treated with caution: it won't work with XML documents.

As a note, Firefox 1.0 didn't support innerHTML with XHTML documents. They changed that after a flood of feedback. I guess that'll ensure that XHTML 1.0 pages will always have a support for innerHTML despite that being incorrect from the standards perspective. XHTML 1.0 has ended up being handled as text/html anyway - personally I don't see a major problem in this, like some evangelist purists do. Although what I agree with is that XHTML 1.1 should always be handled as application/xhtml+xml, effectively making it unusable in current web. And innerHTML shouldn't be used on those pages, if one for some reason wants to make a page in XHTML 1.1 and totally ignore IE users.

document.getElementById() is the recommended way to get reference of elements in your web page. This is easier to use and also would not require any changes if you decide to change something else like the Form name (or Id) etc.
However, as it traverses the entire DOM tree, it is usually slower (not noticeable) than the document.forms notation of referencing objects.

document.forms is harder to use in the sense that you need you to know properly the entire path to the object beginning from the document element. But on the other hand it is comparatively faster (not noticeable).

Pradeep :)

Thanks everyone for the clarification.

Quote:

---

Originally Posted by Pradeep1210

document.getElementById() is the recommended way to get reference of elements in your web page. This is easier to use and also would not require any changes if you decide to change something else like the Form name (or Id) etc.
However, as it traverses the entire DOM tree, it is usually slower (not noticeable) than the document.forms notation of referencing objects.

document.forms is harder to use in the sense that you need you to know properly the entire path to the object beginning from the document element. But on the other hand it is comparatively faster (not noticeable).

---

Bollocks.