1

I want to get the control id so that I can attach event to this id,code for this is:

var t=document.getElementsByName('test');
alert(t);

this 't' here returns the Object HTMLCollection but when I run this code on jsfiddle i got Object NodeList and by using t[0].id I got the required id. I have some requirement so I don't want to use document.getElementById();

Can any one tell me why this is happening and how can I get the id of control through Object HTMLCollection?

j08691
  • 204,283
  • 31
  • 260
  • 272
Codex
  • 78
  • 1
  • 2
  • 13
  • instead of alerting t, you can console.log(t), this gives you most of the time more information in the console manager – Vincent Hogendoorn Apr 02 '14 at 13:15
  • 1
    Why would you not want to use `document.getElementById()` ? It's the fastest way and supported by all browsers – RononDex Apr 02 '14 at 13:16
  • I don't understand, you got what you wanted with `t[0].id`, so what's the issue? – j08691 Apr 02 '14 at 13:16
  • I think you need to read [this question](http://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects) and [this question](http://stackoverflow.com/questions/222841/most-efficient-way-to-convert-an-htmlcollection-to-an-array) to get a better handle on the issue – StephenH Apr 02 '14 at 13:18
  • since name it's not univocal like id, getElementsByName return an ARRAY, most of the time with just 1 element but array. Without use getElementById you need to pass through this array... – MrPk Apr 02 '14 at 13:18
  • document.getElementsByName not working on IE8,and that's why it return me HTML Collection,i run the same code on firefox,chrome and it is working fine.Also i tried getElementsByClassName and it is not working on IE8. – Codex Apr 03 '14 at 15:01

2 Answers2

6

So it looks like you have two questions:

1) Can any one tell me why this is happening

and

2) how can I get the id of control through Object HTMLCollection?

First I think you need to understand WHAT an HTMLCollection is. Please read the answer to this stackoverflow question and pay careful attention to what is written, specifically

getElementsByTagName is method of the DOM interface. It accepts a tag name as input and returns a NodeList (some browsers chose to return HTMLCollection instead, which is OK, since it is a superset of NodeList).

So the two share most properties, especially basic properties like id. I recommend reading up on HTMLCollection and NodeList on MDN.

This also contains the answer to your question as to WHY this happens

getElementsByTagName is method of the DOM interface. It accepts a tag name as input and returns a NodeList (some browsers chose to return HTMLCollection instead, which is OK, since it is a superset of NodeList).

Essentially, the answer is simply that different browsers behave differently (when it comes to web development, you will find this is true in MANY ways).

So onto a more deailed answer to the second part of your question. ASSUMING that you have HTML elements with the name 'test' and ASSUMING you want the first one, all you have to do is reference the first element of the returned array, whether it is a NodeList or an HTMLCollection

var element = document.getElementsByName('test')[0];

If you want to make sure you got elements back, just get the array and check that it has > 0 elements

var element;
var elements = document.getElementsByName('test');
if (elements.length > 0)
{
    element = elements[0];
}
Community
  • 1
  • 1
StephenH
  • 1,126
  • 11
  • 24
0

The method you are using will return an array, so to answer your question you will need to do:

var element = document.getElementsByName('test')[0];
T McKeown
  • 12,971
  • 1
  • 25
  • 32