Re: I am confused with result of hasChildNotes() method of DOM
Jonathan Hurshman <[email protected]> Tue, 17 Jun 2008 02:49:45 -0700 (PDT)
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <[email protected]> |
--zITBgw7dali1ZbM54lP-M8JgWusk7PgM60rE3QZ Content-Type: text/plain; charset=us-ascii Content-Transfer-Encoding: 7bit All the responses so far are correct: it's because your markup is invalid. To explain why this causes the symptoms you're seeing, you need to understand that all browsers take the HTML given and parse it to create a DOM tree. DOM method calls operate on the resultant tree, not on the original HTML. In this case, since the HTML is invalidly formed, (most) browsers will try to "repair" it: Original HTML is something like this: <table> <tr id="td1"> <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> </tr> </table> When the browser reaches the <tr id="td3"> line, it needs to modify something to get the DOM tree to be valid. The option most browsers take is to implicitly close the <td id="td3"> and the <tr id="td1">. Therefore, your HTML is treated as it if was: <table> <tr id="td1"> <td id="td2"></td></tr> <!-- Implicit tag closure --> <tr id="td3"> <td id="td4"> Some Test TEXT </td> <td id="td5"><input type=checkbox value="chk-4" >CheckBox 4 </td> </tr> </td> <!-- Ignored --> </tr> <!-- Ignored --> </table> So you see why hasChildNodes returns false: as corrected, td2 in fact has no children. - Jonathan Hurshman ----- Original Message ---- From: ms_chetan <[email protected]> To: [email protected] Sent: Thursday, March 27, 2008 7:22:47 AM Subject: [wdf-dom] I am confused with result of hasChildNotes() method of DOM I am using IE 6.x This is the HTML code <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> Herez the Javascript Code var a = document.getElement Id('td2') ; a.hasChildNodes( ); The line "a.hasChildNodes( )" should return TRUE because there is TR in that columns, but it is returning FALSE; WHY???? --zITBgw7dali1ZbM54lP-M8JgWusk7PgM60rE3QZ Content-Type: text/html; charset=US-ASCII Content-Transfer-Encoding: 7bit <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body style="background-color: #ffffff;"> <!--~-|**|PrettyHtmlStartT|**|-~--> <div id="ygrp-mlmsg" style="width:655px; position:relative;"> <div id="ygrp-msg" style="width: 470px; margin:0; padding:0 25px 0 0; float:left; z-index:1;"> <!--~-|**|PrettyHtmlEndT|**|-~--> <div id="ygrp-text"> <p>All the responses so far are correct: it's because your markup is invalid. To explain why this causes the symptoms you're seeing, you need to understand that all browsers take the HTML given and parse it to create a DOM tree. DOM method calls operate on the resultant tree, not on the original HTML.<br> <br> In this case, since the HTML is invalidly formed, (most) browsers will try to "repair" it:<br> <br> Original HTML is something like this:<br> <br> <table><br> <tr id="td1"><br> <td id="td2"><br> <tr id="td3"><br> <td id="td4"> Some Test TEXT </td><br> <td id="td5"><input type=checkbox value="chk-4" >CheckBox 4 <br> </td><br> </tr><br> </td><br> </tr><br> </table><br> <br> When the browser reaches the <tr id="td3"> line, it needs to modify something to get the DOM tree to be valid. The option most browsers take is to implicitly close the <td id="td3"> and the <tr id="td1">. Therefore, your HTML is treated as it if was: <br> <br> <table><br> <tr id="td1"><br> <td id="td2"></td><wbr></tr> <!-- Implicit tag closure --><br> <tr id="td3"><br> <td id="td4"> Some Test TEXT </td><br> <td id="td5"><input type=checkbox value="chk-4" >CheckBox 4 <br> </td><br> </tr><br> </td> <!-- Ignored --><br> </tr> <!-- Ignored --><br> </table><br> <br> So you see why hasChildNodes returns false: as corrected, td2 in fact has no children.<br> <br> - Jonathan Hurshman<br> ----- Original Message ----<br> From: ms_chetan <<a href="mailto:ms_chetan%40yahoo.com">ms_chetan@yahoo.<wbr>com</a>><br> To: <a href="mailto:wdf-dom%40yahoogroups.com">wdf-dom@yahoogroups<wbr>.com</a><br> Sent: Thursday, March 27, 2008 7:22:47 AM<br> Subject: [wdf-dom] I am confused with result of hasChildNotes(<wbr>) method of DOM<br> <br> I am using IE 6.x<br> <br> This is the HTML code<br> <td id="td2"><br> <tr id="td3"><br> <td id="td4"> Some Test TEXT </td><br> <td id="td5"><input type=checkbox value="chk-4" >CheckBox 4 <br> </td><br> </tr><br> </td><br> <br> Herez the Javascript Code<br> <br> var a = document.getElement Id('td2') ;<br> a.hasChildNodes( );<br> <br> The line "a.hasChildNodes( )" should return TRUE because there is TR in <br> that columns, but it is returning FALSE;<br> <br> WHY????<br> <br> </p> </div> <!--~-|**|PrettyHtmlStart|**|-~--> <span width="1" style="color: white;">__._,_.___</span> <!-- Start the section with Message In topic --> <div id="ygrp-actbar"> <span class="left"> <a href="http://groups.yahoo.com/group/wdf-dom/message/5627;_ylc=X3oDMTM0N2dyY2lmBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU2MzEEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMjEzNjk2MTg4BHRwY0lkAzU2Mjc-"> Messages in this topic </a> (<span class="bld">5</span>) </span> <a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJwOW05amNyBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU2MzEEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMjEzNjk2MTg4?act=reply&messageNum=5631"> <span class="bld"> Reply </span> (via web post) </a> | <a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJlOW1rYWJnBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTIxMzY5NjE4OA--" class="bld"> Start a new topic </a> </div> <!------- Start Nav Bar ------> <!-- |**|begin egp html banner|**| --> <div id="ygrp-vitnav"> <a href="http://groups.yahoo.com/group/wdf-dom/messages;_ylc=X3oDMTJlbzl1cXU5BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTIxMzY5NjE4OA--">Messages</a> </div> <!-- |**|end egp html banner|**| --> <div id="ygrp-grft"> </div> <div id="ygrp-mkp"> <div id="hd">MARKETPLACE</div> <div id="ads"> <div class="ad"> <hr size=1 noshade><a href="http://us.ard.yahoo.com/SIG=13rl9bcbh/M=624381.12730922.13032918.10835568/D=groups/S=1705016061:MKP1/Y=YAHOO/EXP=1213703388/L=/B=JWg5CNFJq2s-/J=1213696188942356/A=5379723/R=0/SIG=14evd63no/*http://media.adrevolver.com/adrevolver/href?banner=189158&place=26143&url_=http://tc.deals.yahoo.com/tc/blockbuster/display.com?cid=bbi00027">Blockbuster</a> is giving away a FREE trial of - <a href="http://us.ard.yahoo.com/SIG=13rl9bcbh/M=624381.12730922.13032918.10835568/D=groups/S=1705016061:MKP1/Y=YAHOO/EXP=1213703388/L=/B=JWg5CNFJq2s-/J=1213696188942356/A=5379723/R=1/SIG=14evd63no/*http://media.adrevolver.com/adrevolver/href?banner=189158&place=26143&url_=http://tc.deals.yahoo.com/tc/blockbuster/display.com?cid=bbi00027">Blockbuster Total Access.</a> <!--AdRevolver code begin--> <script type="text/javascript"> <!-- var title = 'TITLE'; try { if (title == unescape('%u0054%u0049%u0054%u004C%u0045') && document.title) title = document.title; var https = false; try {https = document.location.href.indexOf('https')==0}catch(e){} document.write('<img width="0" height="0" border="0" src="http' + (https ? 's' : '') + '://media.adrevolver.com/adrevolver/trace?adpath=11959&title=' + escape(title) + '&ref=' + escape(document.referrer) + '&rnd=' + Math.round(Math.random() * 10000000) + '">'); } catch(e){} //--> </script> <noscript> <img width="0" height="0" border="0" src="https://media.adrevolver.com/adrevolver/trace?adpath=11959"> </noscript> <!--AdRevolver code end--> </div> </div> </div> <!-- yahoo logo --> <!-- |**|begin egp html banner|**| --> <div id="ygrp-ft"> <a href="http://groups.yahoo.com/;_ylc=X3oDMTJkNnNkMmMwBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMjEzNjk2MTg4"> <img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/logo/ma_grp_160.gif" height="15" width="106" border="0" alt="Yahoo! Groups"></a> <br> <a href="http://groups.yahoo.com/group/wdf-dom/join;_ylc=X3oDMTJmM3ZwdG42BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzEyMTM2OTYxODg-">Change settings via the Web</a> (Yahoo! ID required) <br> Change settings via email: <a href="mailto:[email protected]?subject=Email Delivery: Digest">Switch delivery to Daily Digest</a> | <a href = "mailto:[email protected]?subject=Change Delivery Format: Traditional">Switch format to Traditional</a> <br> <a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJkMTRzNmthBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMjEzNjk2MTg4"> Visit Your Group </a> | <a href="http://docs.yahoo.com/info/terms/"> Yahoo! Groups Terms of Use </a> | <a href="mailto:[email protected]?subject="> Unsubscribe </a> </div> <!-- |**|end egp html banner|**| --> </div> <!-- ygrp-msg --> <!-- Sponsor --> <!-- |**|begin egp html banner|**| --> <div id="ygrp-sponsor" style="width:160px; float:right; clear:none; margin:0 0 25px 0; background:white;"> <!-- Network content --> <!-- Start Recommendations --> <div id="ygrp-reco"> </div> <!-- End Recommendations --> <!-- Start vitality --> <div id="ygrp-vital"> <div id="vithd">Recent Activity</div> <ul style="list-style-type:none; padding: 0; margin: 2px 0;"> <li style="clear: both;"> <div class="ct" style="float: right;"><span style="display:none"> </span>1</div> <div class="cat"><a href="http://groups.yahoo.com/group/wdf-dom/members;_ylc=X3oDMTJmMjIyZXB2BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzEyMTM2OTYxODg-">New Members</a></div> </li> </ul> <a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJla3ExZDJmBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTIxMzY5NjE4OA--"> Visit Your Group </a> </div> <!-- Network content --> <div id="nc"> <div class="ad"> <div id="hd1">Yahoo! Groups</div> <p><a href="http://us.ard.yahoo.com/SIG=13pbodou6/M=493064.12016299.12445691.11322765/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1213703388/L=/B=Jmg5CNFJq2s-/J=1213696188942356/A=4990215/R=0/SIG=11d53kq3t/*http://advision.webevents.yahoo.com/curves/">Wellness Spot</a></p> <p>A resource for Curves</p> <p>and weight loss.</p> </div> <div class="ad"> <div id="hd1">Special K Group</div> <p><a href="http://us.ard.yahoo.com/SIG=13pbrev8v/M=493064.12016300.12445692.11323196/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1213703388/L=/B=J2g5CNFJq2s-/J=1213696188942356/A=5170416/R=0/SIG=11b5gu1oe/*http://new.groups.yahoo.com/specialKgroup">on Yahoo! Groups</a></p> <p>Learn how others</p> <p>are losing pounds.</p> </div> <div class="ad"> <div id="hd1">All-Bran</div> <p><a href="http://us.ard.yahoo.com/SIG=13o1qavt3/M=493064.12016283.12445687.8674578/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1213703388/L=/B=KGg5CNFJq2s-/J=1213696188942356/A=5202317/R=0/SIG=11aijbghb/*http://new.groups.yahoo.com/allbrangroup">Day 10 Club</a></p> <p>on Yahoo! Groups</p> <p>Feel better with fiber.</p> </div> </div> </div> <!-- |**|end egp html banner|**| --> <div style="clear:both; color: #FFF; font-size:1px;">.</div> </div> <img src="http://geo.yahoo.com/serv?s=97359714/grpId=2564563/grpspId=1705016061/msgId=5631/stime=1213696188/nc1=4990215/nc2=5170416/nc3=5202317" width="1" height="1"> <br> <span style="color: white;">__,_._,___</span> <!--~-|**|PrettyHtmlEnd|**|-~--> </body> <!--~-|**|PrettyHtmlStart|**|-~--> <head> <style type="text/css"> <!-- #ygrp-mkp{ border: 1px solid #d8d8d8; font-family: Arial; margin: 14px 0px; padding: 0px 14px; } #ygrp-mkp hr{ border: 1px solid #d8d8d8; } #ygrp-mkp #hd{ color: #628c2a; font-size: 85%; font-weight: bold; line-height: 122%; margin: 10px 0px; } #ygrp-mkp #ads{ margin-bottom: 10px; } #ygrp-mkp .ad{ padding: 0 0; } #ygrp-mkp .ad a{ color: #0000ff; text-decoration: none; } --> </style> </head> <head> <style type="text/css"> <!-- #ygrp-sponsor #ygrp-lc{ font-family: Arial; } #ygrp-sponsor #ygrp-lc #hd{ margin: 10px 0px; font-weight: bold; font-size: 78%; line-height: 122%; } #ygrp-sponsor #ygrp-lc .ad{ margin-bottom: 10px; padding: 0 0; } --> </style> </head> <head> <style type="text/css"> <!-- #ygrp-mlmsg {font-size:13px; font-family: arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;} #ygrp-mlmsg table {font-size:inherit;font:100%;} #ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;} #ygrp-mlmsg pre, code {font:115% monospace;*font-size:100%;} #ygrp-mlmsg * {line-height:1.22em;} #ygrp-text{ font-family: Georgia; } #ygrp-text p{ margin: 0 0 1em 0; } #ygrp-tpmsgs{ font-family: Arial; clear: both; } #ygrp-vitnav{ padding-top: 10px; font-family: Verdana; font-size: 77%; margin: 0; } #ygrp-vitnav a{ padding: 0 1px; } #ygrp-actbar{ clear: both; margin: 25px 0; white-space:nowrap; color: #666; text-align: right; } #ygrp-actbar .left{ float: left; white-space:nowrap; } .bld{font-weight:bold;} #ygrp-grft{ font-family: Verdana; font-size: 77%; padding: 15px 0; } #ygrp-ft{ font-family: verdana; font-size: 77%; border-top: 1px solid #666; padding: 5px 0; } #ygrp-mlmsg #logo{ padding-bottom: 10px; } #ygrp-reco { margin-bottom: 20px; padding: 0px; } #ygrp-reco #reco-head { font-weight: bold; color: #ff7900; } #reco-grpname{ font-weight: bold; margin-top: 10px; } #reco-category{ font-size: 77%; } #reco-desc{ font-size: 77%; } #ygrp-vital{ background-color: #e0ecee; margin-bottom: 20px; padding: 2px 0 8px 8px; } #ygrp-vital #vithd{ font-size: 77%; font-family: Verdana; font-weight: bold; color: #333; text-transform: uppercase; } #ygrp-vital ul{ padding: 0; margin: 2px 0; } #ygrp-vital ul li{ list-style-type: none; clear: both; border: 1px solid #e0ecee; } #ygrp-vital ul li .ct{ font-weight: bold; color: #ff7900; float: right; width: 2em; text-align:right; padding-right: .5em; } #ygrp-vital ul li .cat{ font-weight: bold; } #ygrp-vital a{ text-decoration: none; } #ygrp-vital a:hover{ text-decoration: underline; } #ygrp-sponsor #hd{ color: #999; font-size: 77%; } #ygrp-sponsor #ov{ padding: 6px 13px; background-color: #e0ecee; margin-bottom: 20px; } #ygrp-sponsor #ov ul{ padding: 0 0 0 8px; margin: 0; } #ygrp-sponsor #ov li{ list-style-type: square; padding: 6px 0; font-size: 77%; } #ygrp-sponsor #ov li a{ text-decoration: none; font-size: 130%; } #ygrp-sponsor #nc{ background-color: #eee; margin-bottom: 20px; padding: 0 8px; } #ygrp-sponsor .ad{ padding: 8px 0; } #ygrp-sponsor .ad #hd1{ font-family: Arial; font-weight: bold; color: #628c2a; font-size: 100%; line-height: 122%; } #ygrp-sponsor .ad a{ text-decoration: none; } #ygrp-sponsor .ad a:hover{ text-decoration: underline; } #ygrp-sponsor .ad p{ margin: 0; } o{font-size: 0; } .MsoNormal{ margin: 0 0 0 0; } #ygrp-text tt{ font-size: 120%; } blockquote{margin: 0 0 0 4px;} .replbq{margin:4} --> </style> </head> <!--~-|**|PrettyHtmlEnd|**|-~--> </html><!--End group email --> --zITBgw7dali1ZbM54lP-M8JgWusk7PgM60rE3QZ--