记录学习JavaScript中遇到的知识点
1、在使用nextSibling获取ul下三个li标签中第二个节点Id时，发现IE10、Chrome均不忽略换行、空格及Tab键。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Exercises.</title>
</head>
<body>
<h1>This is my first exercise.</h1>
<ul>
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>
</body>
</html>
<script tyoe="text/JavaScript">
var nodeItem=document.getElementById("item1");
alert(nodeItem.id);
alert(nodeItem.nextSibling.nodeType);
alert(document.getElementsByTagName("ul")[0].childNodes.length);
</script>
ie10、Chrome中运行结果均为：item1，3，7。即("item1").nextSibling.nodeType=3为文本类型节点，也就是没有忽略节点"item1"后面的空文本节点（空格、回车和Tab键）。<ul></ul>标签内共有4个换行，3个<li></li>节点，共7个。
然后将<ul></ul>标签内的换行删除，ie10、Chrome中运行结果则为：item1,1,3。
2、现在改变策略使用函数getNextNode(node)来获取下一个Element节点，以达到忽略换行、空格及Tab键。
<script tyoe="text/JavaScript">
//获取节点ID
function getNextNode(node){
node=typeof node=="string" ? document.getElementById(node):node;
var nextNode=node.nextSibling;
if(!nextNode)
return null;
while(true){
//访问到下一个Element节点
if(nextNode.nodeType==1){
break;
}
else{
//访问到非Element类型节点
if(nextNode.nextSibling){
nextNode=nextNode.nextSibling;
}
else{
break;
}
}
}
return nextNode;
}
var nextNode=getNextNode("item1");
alert(nextNode.id);
var nodeItem=document.getElementById("item1");
alert(nodeItem.nextSibling.id);
</script>
ie10、Chrome中运行结果均为：item2，undefined。函数getNextNode(node)按意愿实现正确获取了"item1"的下一个Element节点，网络说法是（本人未测试）：IE8.0及其以下版本的浏览器会忽略节点间的空白节点，遵循W3C规范的浏览器（Chrome、FireFox、Safari等）则会把这些空白作为文本节点处理。
时间： 2024-12-24 04:52:08