...

View Full Version : outerHTML Problem in FireFox



JohnKrutsch
08-08-2004, 02:50 AM
I need to read data from the first table on a given page. I cannot change the page I need to read in any way but it does live in the same domain. I load the frame into an iframe then proceed to read it. I have broken it down into a simple example without the iframe to show my problem:



<table>
<tr>
<td>Row 1 | Cell 1</td>
<td>Row 1 | Cell 2</td>
<td>Row 1 | Cell 3</td>
</tr>
<tr>
<td>Row 2 | Cell 1</td>
<td>Row 2 | Cell 2</td>
<td>Row 2 | Cell 3</td>
</tr>
<tr>
<td>Row 3 | Cell 1</td>
<td>Row 3 | Cell 2</td>
<td>Row 3 | Cell 3</td>
</tr>
</table>



<script type="text/javascript">
var info=document.getElementsByTagName("table")[0].rows;
alert(info.length);
for(var i=0; i<info.length; i++){
alert(info[i].outerHTML)
}
</script>


In IE it works as expected. It first alerts 3 to indicate there are three rows in the table then it alerts the contents of each row to me. In FireFox, however, it will alert 3 to indicate the number of rows but the call for the outerHTML just alerts undefined for each of the rows.

So how does outerHTML work in FireFox?

dumpfi
08-08-2004, 03:32 AM
Maybe i'm wrong but i thought that outerHTML is only supported by IE and Opera. You need to use innerHTML instead or firstChild.nodeValue.

dumpfi

SpiritualStorms
08-08-2004, 04:53 PM
I didnt know you could turn a regular variable into an array without first assigning the array constructor:


<script type="text/javascript">
var info=document.getElementsByTagName("table")[0].rows;
alert(info.length);
for(var i=0; i<info.length; i++){
alert( info[ i ].outerHTML)
}
</script>


Why have the array constructor if you can do what you did above?

dumpfi
08-08-2004, 05:37 PM
First, the rows property returns an object, not an array.

Second, in many cases you don't need an array / object from any of the available functions / properties but an custom array / object which holds or which you can assign the data you need.

dumpfi

JohnKrutsch
08-08-2004, 09:14 PM
If I just wanted the innerHTML I would have used that. I need to read in attributes and values that are found within the <tr> tag. I guess I should have made that more clear in my example, my bad. A little more research on my part gave me what I needed. Instead of just checking the entire outerHTML I am now checking for specific attributes and classes using:

node.className

and

node.getAttribute("attribute")

and that works in all compliant browsers and is more efficient to boot.

neofibril
08-08-2004, 09:44 PM
Just FYI:
instead of enumerating attributes, something like this could work for that.



<script type="text/javascript">
var elem,
info = document.getElementsByTagName("table")[0].rows,
ln = info.length,
i = -1;
while(++i < ln)
{
elem = document.createElement("table");
elem.appendChild(info[i].cloneNode(true));
alert(elem.innerHTML);
}
</script>


Also, I believe "collection" is the proper term (rather than "array"...).

SpiritualStorms
08-09-2004, 06:42 AM
I am still confused. I thought that if you wanted to create an array/collection/grouping, that you had to do something like this:


var info= new Array();

In the above, the variable is an array, an empty collections storage box, as it were. But here is what was written:


var info=document.getElementsByTagName("table")[0].rows;


Am i then to understand that the variable info in the above is not a regular array/collection because of the fact that it is representing the rows object? Is this why the below is acceptable:


alert( info[ i ].outerHTML)


I dont get it.

SpiritualStorms
08-09-2004, 06:44 AM
Yes, its the proper term, but that's only if you are into splitting atoms:


Also, I believe "collection" is the proper term (rather than "array"...).


To me a collection is just the same as an array, and an array in the end is a grouping of some kind.

Willy Duitt
08-09-2004, 06:50 AM
If I just wanted the innerHTML I would have used that. I need to read in attributes and values that are found within the <tr> tag.

And wouldn't the innerHTML of tbody have done just that??

.....Willy

JohnKrutsch
08-09-2004, 07:17 AM
Willy: I don't think so because I need to evaluate each row and decide what to do based on the class and other attributes of that particular row. So looping through the rows that are returned and using node.className and node.getAttribute("attribute") solved my problem splendidly.

SpiritualStorms: yes, there are lots of collections on a web page that you can read like an array that are not specifically set up as arrays by the programmer. For example document.forms is a collection of all of the forms on your page you can access the first form on the page like so:

document.forms[0]

and the second form:

document.forms[1]

etc..

The same is true for all of the images on your page; document.images and even all of the links on your page; document.links.

While these are not user defined arrays they are collections that the browser automatically organizes for you.

neofibril
08-09-2004, 07:19 AM
I dont get it.
Well, I don't either, but like to think of it this way:

'rows' is a property of 'table[0]' that returns a collection, and 'info' is a reference to that, and 'info[i]' is a member of it

SpiritualStorms
08-10-2004, 04:46 AM
I understand most of this:


SpiritualStorms: yes, there are lots of collections on a web page that you can read like an array that are not specifically set up as arrays by the programmer. For example document.forms is a collection of all of the forms on your page you can access the first form on the page like so:

document.forms[0]

and the second form:

document.forms[1]

etc..

The same is true for all of the images on your page; document.images and even all of the links on your page; document.links.

While these are not user defined arrays they are collections that the browser automatically organizes for you.


But what i didnt get is how a regular variable that was declared as a regular variable was all of the sudden turned into an array, or a collection. It just seems like i learn a whole lot of syntax, but then i see others use code, and they dont follow syntax. I was always under the impression that programmer had to use the array constructor as a means of having user-defined arrays, or collections.

SpiritualStorms
08-10-2004, 04:50 AM
So i was sort of right?


Well, I don't either, but like to think of it this way:

'rows' is a property of 'table[0]' that returns a collection, and 'info' is a reference to that, and 'info[i]' is a member of it


So if i do something like,


var imgGroup=documentimages[0]

that i could now use my variable as an array? In other words, i could i then do something like,


alert(imgGroup[3]) ?

glenngv
08-10-2004, 04:59 AM
No. It should be:

var imgGroup = document.images;
alert(imgGroup[0].src);

if you do:

var imgGroup=document.images[0];

you're only accessing the first element in the images collection, not the collection itself.

SpiritualStorms
08-10-2004, 06:28 AM
But why would i have to include the src property?


No. It should be:

var imgGroup = document.images;
alert(imgGroup[0].src);

if you do:

var imgGroup=document.images[0];

you're only accessing the first element in the images collection, not the collection itself.

glenngv
08-10-2004, 07:21 AM
It's just a sample. Since each of the element is an Image object, it has the src property which tells the url of the image.

If you have these images in your document:

<img src="img1.gif" name="imgName1" id="imgId1" />
<img src="img2.gif" name="imgName2" id="imgId2" />
<img src="img3.gif" name="imgName3" id="imgId3" />

and then execute the snippet:

var imgGroup = document.images;
alert(imgGroup[0].src);

The alert displays the absolute path of the image file which would be something like http://path/img1.gif.

You can also access the name and id attributes and other defined attributes of the image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum