js:警惕firstChild

代码

<body>
<div id="div1">
<A href="http://www.baidu.com" id="a1" target="_blank">
<IMG back_src=
"http://img3.paipaiimg.com/25c277ca/boss-4cc63f1b-00000000185d69610001288060699000.1.jpg"
/>
</A>
</div>
<script type="text/javascript">
window.onload
=function(){
a
=document.getElementById("div1");
alert(a.tagName);
//输出DIV
var b=a.firstChild;
alert(b.tagName);
//输出undefined,停止执行
var c=b.firstChild;
alert(c.tagName);
}
</script>

<!--
在使用firstChild时,父标签和子标签之间不要任何空格和回车符
正确代码如下 :
-->

<body>
<div id="div1"><A href="http://www.baidu.com" id="a1" target="_blank"><IMG
back_src="http://img3.paipaiimg.com/25c277ca/boss-4cc63f1b-00000000185d69610001288060699000.1.jpg" />
</A>
</div>
<script type="text/javascript">
window.onload
=function(){
a
=document.getElementById("div1");
alert(a.tagName);
var b=a.firstChild;
alert(b.tagName);
var c=b.firstChild;
alert(c.tagName);
}
</script>
</body>
 
注释:Internet Explorer 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozilla 不这么做。因此,在下面的例子中,我们用一个函数来检测第一个子节点的节点类型。
元素节点的节点类型是 1,因此假如第一个子节点不是元素节点,则移动到下一个节点,并检测该节点是否是元素节点。这个过程一直持续到找到第一个子节点为止。这种方法可以确保在 Internet Explorer 和 Mozilla 都获得正确的结果。
原文地址:https://www.cnblogs.com/554006164/p/1929840.html