![Email & GTalk: lovelywcm[ at no_spam ]gmail.com](http://1.bp.blogspot.com/_RtqRASEBtF8/RqgtItAk7uI/AAAAAAAAAbo/FSkvQ5mIE5g/s400/mail.png "Feel free to send me a mail, or GTalk with me :)")
杂碎笔记：DOM中的Text节点
DOM中的Text节点，has no properties错误
考虑下面一段代码：
<script type="text/javascript">
function switch_nextSibling_display(hdl){
hdl=hdl.nextSibling;
if(hdl.style.display=="none") hdl.style.display="block";
else hdl.style.display="none";
}
</script>
<input type="button" value="Click Me!" onclick="switch_nextSibling_display(this)"/>
<input type="button" value="Hidding Me!"/>
function switch_nextSibling_display(hdl){
hdl=hdl.nextSibling;
if(hdl.style.display=="none") hdl.style.display="block";
else hdl.style.display="none";
}
</script>
<input type="button" value="Click Me!" onclick="switch_nextSibling_display(this)"/>
<input type="button" value="Hidding Me!"/>
能得到我们想要的结果吗？否！如果用firebug调试的话（有了firebug太爽了哈～），会得到“……has no properties”的提示。这是因为：两个 input 控件之间有个换行符。在DOM树中，包括换行符、空格及其他普通字符都属于Text节点。不能因为换行符和空格看不见就当它不存在，实际上，前 input 节点的 nextSibling 正是这个Text节点，应该nextSibling.nextSibling才对。不过，在IE中，这个Text节点是被忽略的。为了兼容，有两个方法，一就是不要换行；或者，加上这么一句：if(hdl.nodeType==3) hdl=hdl.nextSibling，nodeType等于3表示Text节点。
P的问题～
同样是上面的script，下面的click能预期执行吗？
<input type="button" value="Click Me!" onclick="switch_nextSibling_display(this)"/><p>I want to hide<p>all this!</p></p>
同样不能，"all this"是不受影响的。虽然看起来，后一个p只是前一个p的子节点，好像前面的p包括整句话才能称的上是input的“兄弟”。但实际上，p是不能自包含的，当后一个p出现的时候，前一个p就被关闭了，所以那句话等价于：<p>I want to hide</p><p>all this!</p>。同理，p也不能包含div等块级元素。虽然手工不大可能写出这样的语句，但一些半自动的场合难免，这时用JS读/写DOM树可能会碰到一些意想不到的问题。
var与非var
JavaScript中，在函数外用不用var定义的变量都是全局的，在函数内部，var定义局部变量，不用var定义全局变量，这似乎没什么问题。但下面一段代码会alert出什么呢？
<script type="text/javascript">
var a=1;
function f(){
alert(a);
var a=2;
}
f();
</script>
1吗？No。因为f()里面声明了与全局变量同名的局部变量，代码在运行前先处理变量声明，所以此a已非彼a了，但是alert的时候a还没有被赋值，所以结果是undefined。倘若把f()里面的声明：var a=2 改成赋值：a=2，此a就仍然是彼a，此时因为a的值尚未被改变，所以结果是1。另，全局的JS变量还能被VBScript访问。
