HTML5中如果标签之间随意使用换行或者空格可能会出现意向不到的bug.
具体实例:
写法一:
<ul id="list1"><li></li><li></li><li></li><li></li><li></li></ul>
写法二:
<ul id="list2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
如上所示,如果一个ul标签使用上述2种写法,使用以下方法提取出来的数组将截然不同:
<script type="text/javascript">
var list1Tag=document.getElementById("list1"); //通过id获取list1标签
var liNodes1=list1Tag.childNodes; //通过.childNodes;方法将ul中的子标签存入liNodes1数组中
var list2Tag=document.getElementById("list2"); //通过id获取list2标签
var liNodes2=list2Tag.childNodes; //通过.childNodes;方法将ul中的子标签存入liNodes2数组中
</script>
通过debug可以查看liNodes1和liNodes2两个数组的内容:
liNodes1=[<li>,<li>,<li>,<li>,<li>];
liNodes2=[<text>,<li>,<text>,<li>,<text>,<li>,<text>,<li>,<text>,<li>,<text>];
以上结果不难看出:编译器自动将换行的区域当作一个<text>标签,在使用liNodes.item(index);方法取标签时会出现取出来的不是<li>标签的bug。