The processing of Firefox's firstchild attribute for each element in table

A few days ago to test a small program, which needs to get the table in the first cell of a row of the value of the property, it is natural to use:

Tr.firstChild.getAttribute (' bill_id ');

This line of code executes correctly on the IE6, but there is no result on the FireFox3.5. Error TIP: This property or method is not supported. Based on experience, it should be TR or tr.firstchild. One of the two does not get the correct object. The Tr.nodename and Tr.firstChild.nodeName are then tested using the TR object without errors, while the value of the latter is #text, and the first TD object is obtained using tr.firstChild.sibling.

At that time, I thought, Firefox is not all the elements in the table to use such processing, that is not in accordance with the order of TABLE>TBODY>TR/TH>TD, but table> #text |tbody> #text |tr > #text |td. So I wrote the following simple test program, for verification.

This is the result as shown in the following figure:

It is obvious from the diagram that the FirstChild value of Tbody is TR, which is not the same as the original idea.

Careful observation of the code can be found that the tbody is not actually written in the code, but by the browser automatically add, then will not be the cause of this. The form code is then changed to the following form:

<table id= "table1" border= "1" > <tbody> <tr> <td>cell1</td> <td>cell2</td> </tr> <tr> <td>cell3</td> <td>cell4</td> </tr> </tbody> </table >

Run again, as shown in figure:

Confirms the above assumption that tbody is automatically added by Firefox.

And then think, if the table is entirely generated by JavaScript dynamically, FirstChild is not #text it. Test this by using the following procedure:

function TestTable2 () {var table = document.createelement (' table '); var tbody = document.createelement (' tbody '); Table.appendchild (TBODY); var tr = document.createelement (' tr '); Tbody.appendchild (TR); var td = Document.createelement (' TD '); Tr.appendchild (TD); Document.body.appendChild (table); var firstchildoftable = Table.firstChild.nodeName; var firstchildoftbody = Tbody.firstChild.nodeName; var firstchildoftr = Tr.firstChild.nodeName; Alert (' table> ' + firstchildoftable + ' |tbody> ' + firstchildoftbody + ' |tr> ' + FIRSTCHILDOFTR); }

The results obtained this time:

This is consistent with the results in IE.

Now that Firefox and IE have different processing for the firstchild properties of the elements in the table, avoid using the firstchild and other child-related attributes: getElementById (), getElementsByTagName () A method of this class that enables the program to have Cross-browser attributes.