javaScript中childNodes、children的用法几则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>childNodes Method Test</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODy onLoad="aaa();">
<div id="tupian"><table cellpadding="0" cellspacing="1" border="0" width="100%" id="table1">
<tr id="tr1">
<td id="td1">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景" id="1">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
<p id='p123'>
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景3" id="2">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
</p>
</td>
<td id="td2">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="桃花源实景图例2">
<span>123</span>
<span>222</span>
</a>
</td>
</tr>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aaa(){
// alert(document.all['tupian'].childNodes[0].id); //用childNodes取得div子标签对象id
var h = document.all['tupian'].childNodes[0]; //取得id为“tupian”的div子对象
// alert(h.rows[0].id); //取得table的行[0]id
// alert(h.rows[0].childNodes[0].id);
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].src); //第一行第一列A标签下的IMG标签src
// var l = h.rows[0].cells[0].childNodes.length; //childNodes中间有两个并列的双标记标签时，可用childNodes[i]取得对象
// for(var i=0;i<l;i++){
// alert(i);
// alert(h.rows[0].cells[0].childNodes[i].tagName);
// }
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].tagName); //取IMG的tagname
// alert(h.rows[0].cells[1].id); //第一行第二列ID
var w =h.rows[0].cells[1].childNodes[0].childNodes.length; //children和childNodes区别:children只取HTML，它者取HTML和包含文本innerHTML;
alert(w);
alert(h.rows[0].cells[1].childNodes[0].tagName);
for(var j=0;j<w;j++){
alert(j);
alert(h.rows[0].cells[1].childNodes[0].childNodes[j].tagName);
}
}
//上述打出的tagName有4个，因为有\t或者回车或者空格等元素存在。childNodes是会将这些元素读取进去。如果是一行则正确。
//在DOM中childNodes共5个节点类型：Element，Text，Attr，Comment，CDATASection。可用childNodes[i].nodeType == ELEMENT 对childNodes进行过滤.
//如果将childNodes[j]替换成children就不会出现这些问题。
//-->
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>childNodes Method Test</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODy onLoad="aaa();">
<div id="tupian"><table cellpadding="0" cellspacing="1" border="0" width="100%" id="table1">
<tr id="tr1">
<td id="td1">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景" id="1">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
<p id='p123'>
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景3" id="2">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
</p>
</td>
<td id="td2">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="桃花源实景图例2">
<span>123</span>
<span>222</span>
</a>
</td>
</tr>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aaa(){
// alert(document.all['tupian'].childNodes[0].id); //用childNodes取得div子标签对象id
var h = document.all['tupian'].childNodes[0]; //取得id为“tupian”的div子对象
// alert(h.rows[0].id); //取得table的行[0]id
// alert(h.rows[0].childNodes[0].id);
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].src); //第一行第一列A标签下的IMG标签src
// var l = h.rows[0].cells[0].childNodes.length; //childNodes中间有两个并列的双标记标签时，可用childNodes[i]取得对象
// for(var i=0;i<l;i++){
// alert(i);
// alert(h.rows[0].cells[0].childNodes[i].tagName);
// }
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].tagName); //取IMG的tagname
// alert(h.rows[0].cells[1].id); //第一行第二列ID
var w =h.rows[0].cells[1].childNodes[0].childNodes.length; //children和childNodes区别:children只取HTML，它者取HTML和包含文本innerHTML;
alert(w);
alert(h.rows[0].cells[1].childNodes[0].tagName);
for(var j=0;j<w;j++){
alert(j);
alert(h.rows[0].cells[1].childNodes[0].childNodes[j].tagName);
}
}
//上述打出的tagName有4个，因为有\t或者回车或者空格等元素存在。childNodes是会将这些元素读取进去。如果是一行则正确。
//在DOM中childNodes共5个节点类型：Element，Text，Attr，Comment，CDATASection。可用childNodes[i].nodeType == ELEMENT 对childNodes进行过滤.
//如果将childNodes[j]替换成children就不会出现这些问题。
//-->
</SCRIPT>
</BODY>
</HTML>