I am trying to access HTML elements by their id from an array of HTML Elements. I created this array using the getElementsByTagName and I am trying to access these elements like this: arrayName.getElementById("theId").

Basically this is what I am trying to implement:

In a Javascript function triggered by an onchange event I receive the reference to the element causing the trigger. Since its a table structure I get the reference to a <td> element. Now I want to access all the other elements of the <tr> in which that <td> is, using the id of each individual element.

A small replica of my code:

function chngFunction(theTd){
    var thisRow = theTd.parentNode;
    var inputs = thisRow.getElementsByTagName("input");
    alert(inputs[0].value);///////////Currently what I am doing////
    alert(inputs[1].value);///////////Currently what I am doing////
    .
    .
    .
    //////// What I would like ////////
    //// alert(thisRow.getElementById("myId").value);  // or something like that////
    /////////////// OR ///////////////
    //// alert(inputs[].getElementById("myId").value); // or something like that////
    ///////////////////////////////////

This is what I want because, currently if I make any structural changes to my jsp, I have to make changes to js also (that can leave bugs). So using ids to access individual elements would be great.

Please help me out.

I am trying to access HTML elements by their id from an array of HTML Elements. I created this array using the getElementsByTagName and I am trying to access these elements like this: arrayName.getElementById("theId").

Basically this is what I am trying to implement:

In a Javascript function triggered by an onchange event I receive the reference to the element causing the trigger. Since its a table structure I get the reference to a <td> element. Now I want to access all the other elements of the <tr> in which that <td> is, using the id of each individual element.

A small replica of my code:

function chngFunction(theTd){
    var thisRow = theTd.parentNode;
    var inputs = thisRow.getElementsByTagName("input");
    alert(inputs[0].value);///////////Currently what I am doing////
    alert(inputs[1].value);///////////Currently what I am doing////
    .
    .
    .
    //////// What I would like ////////
    //// alert(thisRow.getElementById("myId").value);  // or something like that////
    /////////////// OR ///////////////
    //// alert(inputs[].getElementById("myId").value); // or something like that////
    ///////////////////////////////////

This is what I want because, currently if I make any structural changes to my jsp, I have to make changes to js also (that can leave bugs). So using ids to access individual elements would be great.

Please help me out.

• javascript
• dom

Share Improve this question Follow edited Dec 17, 2016 at 23:11 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 16, 2012 at 8:56 kanishkkanishk 74344 gold badges1515 silver badges3232 bronze badges 5

• Are the IDs unique across the whole document? Please share more details. – Has QUIT--Anony-Mousse Commented Jan 16, 2012 at 8:57
• td have onchange event ? – SergeS Commented Jan 16, 2012 at 9:00
• @Anony-Mousse : My table gets created by a struts Iterator so Ids are not same. What else can I share? Jsp page? – kanishk Commented Jan 16, 2012 at 9:03
• @SergeS : A textfield inside the td has an onchange event associated with it. – kanishk Commented Jan 16, 2012 at 9:04
• ids are supposed to be globally unique in HTML. getElementById will not work reliably across browsers otherwise. Also have a look at jQuery. – Has QUIT--Anony-Mousse Commented Jan 16, 2012 at 10:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

By definition, id values are unique throughout the entire document. So there is no HTMLElement#getElementById that retrieves elements by ID from only that element's descendants. Instead, there's document.getElementById that looks for them globally (since, again, id values are globally unique in the document). So if you're using id values:

alert(document.getElementById("myId").value);

You could use querySelector API.

This should work:

thisRow.querySelector('#myId');

And if your element ids are unique across the document (as they should be), you can just do document.getElementById.

getElementById is a method of the document object, not nodes, so you must use it this way: document.getElementById('id'); .

of course, this will only work if the HTML elements are attached to the DOM tree. In case they are'nt, you should use a selector API. like Sergio is suggesting in his answer.