<table width=500 border='1' >
<tr><td>1111</td></tr>
<tr><td>2222</td></tr>
<tr><td>3333</td></tr>
</table>
table标签控件,用到了childNodes,节点可以用childNodes[0]来获取其第一个节点,但是有些节点是有隐藏节点的,即便你不写,它也是存在的,比如tbody,当你想用table.childNodes[0]得到的你在HTML里写的第一个<tr>节点,其实你得到的是一个tbody的节点,
即便你不写,它也是存在的,所以当你想得到第一个tr节点时你必须这样写:table.childNodes[0].childNodes[0]。
转一篇关于childNodes问题
firstChild 获取对象的 childNodes 集合的第一个子对象的引用。
<div οnclick="alert(this.firstChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>
lastChild 获取该对象 childNodes 集合中最后一个子对象的引用。
<div οnclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>
在<div>标签内再加一行lastChild就找不到了
<div οnclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>
那么用childNodes来测试
<div οnclick="alert(this.childNodes[0].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>
childNodes[0]是表示span,而childNodes[1]表示的并非pre,childNodes[2]才是。
那么如果说childNodes[0]是span,childNodes[2]是pre,那么childNodes[1]则是这两个标签对象间的换行
但为什么childNodes[3]表示了font,而不是childNodes[4]的呢?
<div οnclick="alert(this.childNodes[3].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>
再来一行,childNodes[4]表示的又即是换行,childNodes[5]才是标签p
<div οnclick="alert(this.childNodes[5].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
</div>
根据这个规律,我可以断定childNodes[6]不是换行
<div οnclick="alert(this.childNodes[6].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
<a>a-href</a>
</div>
那么对于对象的换行来说,首项是1,公差是3的等差数列?
此外,对于FF浏览器的测试结果表示满意:
childNodes[1]、childNodes[3]、childNodes[5]、childNodes[7]分别表示<span> <pre> <font> <p>
一个很笨拙的解决办法:我一般对需要通过dom获取的html对象都写在一行上,免得出现诡异现象。
<div id="aDiv">
<input type="text" …>
<input type="button" …>
</div>
在javascript里面有如下代码:
var obj=document.getElementById("aDiv");
alert(obj.childNodes.length);
打印出来应该是2,因为我DIV下面只有2个子元素,
但是实际打印出来是4,请问为什么?
的确是4个 那是因为他会把
<input type="text" …> 后的空格也作为一个空元素
<input type="button" …> 也是如此
试试这个
<div id="aDiv"> <input type="text" value="123123123"> <input type="button" value="确定"> </div>
<script type="text/javascript">
var obj__=document.getElementById("aDIv");
alert(obj__.childNodes.length);
</script>
上面的问题,说明在使用childNode中,标签后的空格也会被计算出来,导致在使用中出现下标显示问题
解决办法,2个,一个写成一行,一种是上面obj__