confused with hasChildNodes() method of DOM

[connectwithme]

I am using IE 6.x & Mozilla 2.x
This is the HTML code

[HTML] <td id="td2">
<tr id="td3">
<td id="td4"> Some Test TEXT </td>
<td id="td5"> <input type=checkbox value="chk-4">CheckBox 4 </td>
</tr>
</td>[/HTML]

this is the Javascript Code

var a = document.getElementById('td2');
 alert(a.hasChildNodes());

the "hasChildNodes()" should give the result as TRUE but it is giving FALSE

WHY ?????????

[gits]

its a corrupt markup and so the dom might be corrupt ... you cannot have a <tr> in a <td> ...

try to fix this and see whether the problem persists ...

kind regards

[dasrasmikant]

I am using IE 6.x & Mozilla 2.x
This is the HTML code

[HTML] <td id="td2">
<tr id="td3">
<td id="td4"> Some Test TEXT </td>
<td id="td5"> <input type=checkbox value="chk-4">CheckBox 4 </td>
</tr>
</td>[/HTML]

this is the Javascript Code

var a = document.getElementById('td2');
 alert(a.hasChildNodes());

the "hasChildNodes()" should give the result as TRUE but it is giving FALSE

WHY ?????????

It can be true in this way

[HTML]<table id="td2">
<tr>
<td ><table>
<tr id="td3">
<td id="td4"> Some Test TEXT </td>
<td id="td5"> <input type=checkbox value="chk-4">CheckBox 4 </td>
</tr>
</table>
</td>
</tr>
</table>
<script language="javascript">
var a = document.getElementById('td2');
alert(a.hasChildNodes());
</script>[/HTML]

[gits]

as you see with valid markup it will work ;) using dom methods requires much more care with the markup that forms the dom-tree ...

kind regards

[connectwithme]

Thanks, Yes you are right, Now I have modified the HTML to
[HTML]<td>
<table> <tr> <td></td> </tr> </table>
</td>[/HTML]

I works for now.. let me work on my logic I will get back on the result

[connectwithme]

Looks like the DOM APIs are very strict about the way the document is structured

When I use this structure.

[HTML]<td >
<table id="TAB2">
<tr id="td3">
<td id="td4"> Some Test TEXT </td>
<td id="td5"> <input type=checkbox value="chk-4">CheckBox 4 </td>
</tr>
</table>
</td>[/HTML]

when I try this

 var c =  document.getElementById("tab2");
  var d = c.childNode.id 

I am expecting TD3 but when I check the " c.childNode.tagName " it return "TBODY".

If this is how the DOM API works then I think I will just have abandon the code
using DOM API do something different.

PLEASE HELP ME IF I AM CORRECT

[gits]

tbody is the correct output correct ... have a look at the w3c html spec ... using childNodes, nextSibling etc. may be confusing ... especially with tables and whitespaces in your html-document ... but you just have to be aware of it

kind regards

[pronerd]

Looks like the DOM APIs are very strict about the way the document is structured

DOM is an XML standard. For it to work you have to follow correct XML syntax rules, which you really want to try to do anyway. The browser wars of the late 90s allowed us to write a lot of really bad code that can not be reliably parsed as you are seeing. Following the correct syntax rules is a big time saver in the long run, and is starting to become a requirement as we switch to XHTML.

If you are not aware of XML syntax the W3CSchool site has a lot of helpful material on XML and XHTML. If you are not using an editor that can validate your HTML/XHTML it would be a big help to switch to one.

http://www.w3schools.com/xhtml/default.asp

If this is how the DOM API works then I think I will just have abandon the code
using DOM API do something different.

PLEASE HELP ME IF I AM CORRECT

There are a number of syntax issues in the examples. First off id attributes should be descriptive and unique to avoid confusion with actual tag names and or reserver words. Secondly since the tag id is 'TAB2' so you need to call 'TAB2' instead of 'tab2'.