JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev()，都是获取下一个/上一个同胞元素，如果下一个同级节点不存在，则此属性返回值是null。但是具体的使用中还是有差异的，如果注意。就会引起错误

html结构中的各种空格，换行符都可能会把文本节点当做同胞元素处理。这就会导致错误。

例如下面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

    window.onload = function() {

        var nextType = document.getElementById('one').nextSibling;

        alert(nextType.nodeType);

    }

    </script>

</head>
<body>

    <div id="div">

        <p id = "one">我是p</p>

        <span id="two">我是span</span>

    </div>

</body>
</html>

在上面这段代码中，我获取了id为"one"的元素并用nextSibling获取了他的下一个同胞元素。赋值给了变量nextType

   var nextType = document.getElementById('one').nextSibling;

　　并使用

  alert(nextType.nodeType);

弹出他的节点类型，如果按常理，元素p下一个相邻的同胞元素为是span,弹出的数字应该为“1”，但我再火狐，谷歌，IE浏览器（网上说只有火狐才会把换行，空格当做文本节点处理，但是我测试谷歌，IE浏览器效果都是一样的，这有点不解）打开后，弹出的数字是3，

也就是文本节点。这是因为换行符被当做文本节点来处理，成为了p元素的下一个同胞元素。

如果我要获取我是span的文本值，需要这样写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

    window.onload = function() {

        var nextType = document.getElementById('one').nextSibling;

        var span = nextType.nextSibling;

　　　　 alert(span.lastChild.nodeValue);

　　 }

    </script>

</head>

<body>

    <div id="div">

        <p id = "one">我是p</p>

        <span id="two">我是span</span>

    </div>

</body>

</html>

p和span标签中间隔着文本节点，需要连续使用2次nextSibling才能选中span标签取得文本值

firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性

所以为了准确地找到相应的元素，会用

firstElementChild,

lastElementChild,

nextElementSibling,

previousElementSibling

兼容的写法，这是JavaScript自带的属性。

但坏消息是IE6,7,8不兼容这些属性。IE9以上和火狐谷歌支持。

于是我写了一个接口口，测试能在包括ie6在内运行的函数（自己写的，不知有没有其他什么细节错误没注意，反正能运行并且过滤文本节点获取正确的下一个元素节点）

    function getNextElement(element){

            var e = element.nextSibling;

            if(e == null){//测试同胞节点是否存在，否则返回空

                return null;

            }

            if(e.nodeType==3){//如果同胞元素为文本节点

                var two = getNextElement(e);

                if(two.nodeType == 1)

                    return two;

            }else{

                if(e.nodeType == 1){//确认节点为元素节点才返回

                    return e;

                }else{

                    return false;

                }

            }

        }

javascript 中的nextSibling和previousSibling使用注意事项的更多相关文章

  1. JavaScript中this的工作原理以及注意事项

    在JavaScript中,this 的概念比较复杂.除了在面向对象编程中,this 还是随处可用的.这篇文章介绍了this 的工作原理,它会造成什么样的问题以及this 的相关例子. 要根据this  ...

  2. JavaScript中DOM的层次节点(一)

    DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...

  3. JavaScript中的DOM及相关操作

    一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...

  4. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  5. nextSibling和previousSibling

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 总结JavaScript中浏览器的兼容问题

    浅析JavaScript中浏览器的兼容问题 浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断 ...

  7. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  8. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  9. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

随机推荐

  1. 安装配置MongoDB

    1.下载mongodb https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.8.tgz 2.解压 tar zxf mongodb-lin ...

  2. Unix/Linux运维首选工具Xmanager Enterprise 3.0的使用教程

    管理Uinx和Linux服务器的兄弟们应该很熟悉Xmanager,一个窗口可以同时控制上百台Linux和Unix服务器,功能非常强大!^_^请看: manager是一个简单易用的高性能的运行在Wind ...

  3. 如何在不影响数据库的正常使用的情况下得到数据的完整.mdf和.ldf文

    一:完整备份数据库 二:还原数据库 四:分离数据库即可得到.mdf和.ldf文件

  4. 《精通CSS：高级Web标准解决方案》学习笔记（上）

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  5. Maven deploy

      1.在maven/conf/setting.xml中: 在<servers>中加入 <server> <id>internal</id> <u ...

  6. javascript中错误使用var造成undefined

    在javascript中依据变量作用的范围不同分为局部变量和全局变量,直接定义的变量是全局变量,全局变量能够被全部的脚本訪问:在函数中定义的变量是局部变量,局部变量仅仅在函数内有效. 假设全局变量和局 ...

  7. hdu 1882 Strange Billboard(位运算+枚举)

    http://acm.hdu.edu.cn/showproblem.php?pid=1882 感觉非常不错的一道题. 给一个n*m(1<=n,m<=16)的矩阵,每一个格子都有黑白两面,当 ...

  8. poj2239 Selecting Courses --- 二分图最大匹配

    匈牙利算法模板题 有n门课程,每门课程可能有不同一时候间,不同一时候间的课程等价. 问不冲突的情况下最多能选多少门课. 建立二分图,一边顶点表示不同课程,还有一边表示课程的时间(hash一下). #i ...

  9. 全球最低功耗蓝牙单芯片（DA14580）系统架构和应用开发框架分析

    DA14580是Dialog公司研制的蓝牙单芯片,号称全球功耗最低,是TI CC2541的四分之一,是运动手环等穿戴类电子产品的常用芯片.但是DA14580的开发门槛不低,适合有蓝牙开发经验的团队来开 ...

  10. 如何判断MSSQL数据库磁盘出现了瓶颈

    问大神石沫:如何判断MSSQL数据库磁盘出现了瓶颈? 石沫(A1):您好,您的问题非常好,SQL SERVER提供了很多关于I/O压力的性能计数器,请选择性能计算器PhysicalDisk(Logic ...