用笨拙的方法操作childNodes

最新推荐文章于 2021-12-03 16:33:06 发布

原创最新推荐文章于 2021-12-03 16:33:06 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

本文讨论了在操作childNodes属性时遇到的问题，特别是在HTML元素间的空格和换行可能导致额外的文本节点出现，这会影响到节点的选择和处理。文章提供了一个具体的示例，并提出了解决方案。

操作chilidNodes时,在节点与节点之间可能有隐藏的文本对象,这是节点与节点之间(红色标明部分的input)的空格与换行引起的.

用笨拙的办法是节点与节点之间不留空格与换行.

<table   border="1"   width="200">
<tr   onMouseOver="this.style.backgroundColor='#D7E8F8'"   onMouseOut="this.style.backgroundColor='#FFFFFF'"   onclick="show(this.childNodes[0].childNodes[0],this.childNodes[1].childNodes[0],this.childNodes[1].childNodes[1])">
<td><input   type="checkbox"   name="a">
</td>
<td><input type="hidden" name="extension_num1" id="extension_num1" value="t1"/><input type="hidden" name="extension_num11" id="extension_num11" value="tt1"/>
</td>
</tr>
<tr   onMouseOver="this.style.backgroundColor='#D7E8F8'"   onMouseOut="this.style.backgroundColor='#FFFFFF'"   onclick="show(this.childNodes[0].childNodes[0],this.childNodes[1].childNodes[0],this.childNodes[1].childNodes[1])">
<td><input   type="checkbox"   name="a">
</td>
<td><input type="hidden" name="extension_num2" id="extension_num2" value="t2"/><input type="hidden" name="extension_num22" id="extension_num22" value="tt2"/>
</td>
</tr>
</table>
<script   language=javascript>
function   show(obj,obj1,obj2)
{
//alert(obj1.value);
alert(obj1.value + "   "+ obj2.value);

if(obj.checked==true)
{
obj.checked=false;
}
else
{
obj.checked=true;
}

}
</script>