IE10、Chrome与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>

View Code

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">
//获取节点IDfunction 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>

View Code

ie10、Chrome中运行结果均为：item2，undefined。函数getNextNode(node)按意愿实现正确获取了"item1"的下一个Element节点，网络说法是（本人未测试）：IE8.0及其以下版本的浏览器会忽略节点间的空白节点，遵循W3C规范的浏览器（Chrome、FireFox、Safari等）则会把这些空白作为文本节点处理。

转载于:https://www.cnblogs.com/rellay/p/5228850.html

IE10、Chrome与nextSibling相关推荐

[转]抛弃jQuery，使用原生JavaScript
原文链接 Document Ready 事件在jQuery中,document.ready可以让代码在整个文档加载完毕之后执行: $(document).ready(function() {// C ...
抛弃jQuery 深入原生的JavaScript
虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...
抛弃jQuery，深入原生的JavaScript
虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...
JS滚轮事件(mousewheel/DOMMouseScroll)了解
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3175 一.学无止境 ...
石川es6课程---1-2、ES6简介
石川es6课程---1-2.ES6简介一.总结一句话总结: 从ECMAScript的历史发展来看,太顺了的时候总会遇到一挫折,比如ecma4 1.ECMAScript 和 JavaScript关系 ...
前端工程师的知识体系
前端开发的核心是HTML + CSS + JavaScript.本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某 ...
那些原生JavaScript
最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的. 原生JS挺简单,为何需要jq? jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不 ...
用PHP和Websocket实现实时通讯
说到websocket大家一定不会陌生,WebSocket是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex).一开始的握手需要借助HTTP请求完成,当浏览器和服务器握 ...
【初学者必读】：前端工程师的知识体系
下图是前端工程师图解: 前端开发的核心是HTML + CSS + JavaScript.本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScri ...

IE10、Chrome与nextSibling

IE10、Chrome与nextSibling相关推荐

最新文章

热门文章