IE10Chrome与nextSibling
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IE10Chrome与nextSibling相关的知识，希望对你有一定的参考价值。
记录学习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等）则会把这些空白作为文本节点处理。
以上是关于IE10Chrome与nextSibling的主要内容，如果未能解决你的问题，请参考以下文章
调用 jQuery next() 不返回 nextSibling 对象
我的 Windows 10 上的 Chrome 83/IE 中出现奇怪的轮廓
输入范围样式 IE11/Firefox 与 Chrome 相同