Accessing Id's from within a javascript object?

[levi.siebens]

So for the past few hours I've been looking for a way to access an ID from an object that I have returned from the DOM. For example if inject the code below into the dom

content.document.getElementsByTagName("div")[0]

I get the first div element returned. However if I try this,

content.document.getElementsByTagName("div")[0].getElementById("elementId")

I get an error (for example, trying this in Firebug gives me an error stating that the last section is not a function). I had read in one place that getElementById (and I'm also assuming getElementByName) can only be used with the document object, but I either wanted to confirm this or find out if there is a way to do this. Also, I wanted to keep the code in this format, I know I can access the nodes of the getElementsByTagName object by using the childNodes option however I wanted to stay away from doing this as it would make the code more complex for what I'm trying to do.

So I guess my question is just, is there a way to use the getElementById and getElementByName functions with the getELementsByTagName function? Thanks.

[Nedals]

Why would you do that, bearing in mind that an ID should only appear once on a page.
If you have an ID appearing multiple times, you should be using 'class' instead.

You could try...
content.document.getElementsByTagName("div")[0].content.document.getElementById("elementId")

[levi.siebens]

So I tried that, but it didn't work, and that would also get the id as an element of the whole document. The reason why I wanted to do it this way is more specifically for named objects where you have several named items all with the same name. However you can differentiate between the items if you can assert their tag has some text (for example, use getElementsByTagName, for all the tr elemnts on screen and check which one has a value of 088 in it), then within that tr object I want to get a textbox that has a specific name (so then I want to do a getElementsByName on the tr object). This is for some work I'm doing with a new automation tool where it can get which elements are found on screen using the dom. This seems to work fine using the com in IE but I wasn't sure if there is a way to do it through the dom.

[yearbass]

you don't need to use the getElementById and getElementsByName method
with the getElementsByTagName method, because it refer to the same element,
the diference is only how you access the element, by id, by tagname or by name.

bytagname(and byname) returns an array of elements that match your definition(method argument, tagname or element name)
and it is the same when you invoke getElementById if you know the id but just return one element.

for example, use getElementsByTagName, for all the tr elemnts on screen and check which one has a value of 088 in it

hmm... don't use tr elements, use td instead. this is the example.

window.onload = function(){
var allTDs = document.getElementsByTagName("td");
var count = 0;
for (var i=0; i<allTDs.length; i++) {
var td = allTDs[i];
if (td.innerHTML == "088") {
count++;
}
}
alert("found " + count + " data");
}

if you really need to use getElementById and getElementsByName, this is the example:

window.onload = function(){
var allTDs = document.getElementsByTagName("td");
var count = 0;

var td, theID, theName
for (var i=0; i<allTDs.length; i++) {
td = allTDs[i];
theID = td.id;
theName = td.getAttribute("name");

if (theID != "") {
document.getElementById(theID).innerHTML = "Ehm...";
}

if (theName != "") {
var allNames = document.getElementsByName(theName);
for (var j=0; j<allNames.length; j++) {
var elm = allNames[j];
// do some stuff here ...
}
}
}
}

[levi.siebens]

That looks like it could work, so I'll have to try that later :), thanks for the info. I was hoping there was something I didn't know about where you could connect the two into one statement as I'm trying to pass the javascript objects in and out of a completely separate program that doesn't even do javascript. Basically I'm sending javascript from the app to the dom of a browser, then when the index of the item is returned I recreate the string of javascript to get that object, so I was hoping I could just easily keep tacking on calls if I wanted to drill down to a certain piece of data (like document.getElementsByTagName("div").getElementByName("blah").getElementsByTagName("a"). But if that's not possible then the code you gave me is the next best thing...it just means more rewriting for me :P. If anyone does know how to do this with tacking on more functions/methods at the end of the line of javascript (like I know you can do if you do a getElementByName.getElementsByTagName, or put to getElementsByTagName's together) I would love to see how you do that.

[levi.siebens]

So I took a look at the code you posted, and found out it doesn't quite do what I need. It gives me the Id or the Name of the current td tag I'm on, however I want the name or value of the element inside of the td tag (in this case it is an input box). So the only way I can see to do this is to get a list of all child nodes, then see if any of them match what I'm looking for, then see if they have any child nodes, etc, etc. So this is the code I've come up with (it's not all code, just a rough outline)

document.getElementsByTagName("div")[1].childNodes.length

Loop through these elements, checking each one for the name
document.getElementsByTagName("div")[1].childNodes[n].getAttribute("name")

See if any of those nodes have children
document.getElementsByTagName("div")[1].childNodes[n].childNodes.length

If they do, loop through those and see if they have the name
document.getElementsByTagName("div")[1].childNodes[n].childNodes[n]getAttribute("name")

etc, etc, etc.

This is what I was trying to avoid doing if at all possible. However if that's the only way to get the ID or Name of an element when your element comes from getElementsByTagName, then I guess that's what I'll have to do. However I am more then open to any thoughts or suggestions :).

[yearbass]

so I was hoping I could just easily keep tacking on calls if I wanted to drill down to a certain piece of data (like document.getElementsByTagName("div").getElementByName("blah").getElementsByTagName("a")

hmm... i see, the easy way to accomplish that is using prototype javascript libarary. use the $$ utility method to traverse element using CSS 3 style.

this is simple example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="libs/js/prototype.js"></script>
<script type="text/javascript">
window.onload = function () {
alert($$('div#test input[name="inputname"]')[0].value)
}
</script>
</head>

<body>

<div id="test">
<span class="class1">test</span>
<a href="#">ehm</a>
<form>
<input name="testing" value="TEST" />
<input name="inputname" value="wow" />
</form>
</div>

</body>
</html>

[yearbass]

don't forget download the prototype.js (http://prototypejs.org)

[Fang]

For an id, providing the id is unique and no other element has a name of the same value, i.e. your code is valid:document.getElementById(elmID)
For a name, loop through array:document.getElementsByTagName("div")[index].getElementsByName(aName)