<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>nextSibling</title>

</head>

<body>

<ul id="u1">

            <li id="a">javascript</li>

            <li id="b">jquery</li>

            <li id="c">html</li>

        </ul>

        <ul id="u2">

            <li id="d">css3</li>

            <li id="e">php</li>

            <li id="f">java</li>

        </ul>

<script type="text/javascript">

    function get_nextSibling(n){

        var x=n.nextSibling;

        while (x && x.nodeType!=1){

            x=x.nextSibling;

        }

        return x;

    }

    function get_previousSlibling(n){

        var x=n.previousSlibling;

        while(x && x.nodeType!=1){

            x=x.previousSlibling;

        }

        return x;

    }

    var x=document.getElementsByTagName("li")[0];

    document.write(x.nodeName);

    document.write(" = ");

    document.write(x.innerHTML);

    var y=get_nextSibling(x);

    if(y!=null){

        document.write("<br />nextsibling: ");

        document.write(y.nodeName);

        document.write(" = ");

        document.write(y.innerHTML);

    }else{

      document.write("<br>已经是最后一个节点");

    }

</script>

</body>

</html>

1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：nodeObject.nextSibling

2.previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：nodeObject.previousSibling

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。

nextSibling和previousSibling的更多相关文章

  1. javascript 中的nextSibling和previousSibling使用注意事项

    JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返 ...

  2. nextSibling，previousSibling，childNodes常见错误

    在使用nextSibling与previousSibling时,常出现选不到预计对象的情况 eg: <div class="a">1</div> <d ...

  3. js nextSibling属性和previousSibling属性概述及使用注意

    1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不 ...

  4. nextSibling和lastSibling

    在FireFox中包含众多空格作为文本节点,因此在我们使用nextSibling和previousSibling时就会出现问题.因为FireFox会把文本节点误当做元素节点的兄弟节点来处理.我们可以添 ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. （第六天）DOM

    概念 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 选取文档元素 (1)通过ID选取元素 var id = document.getElementById("se ...

  7. DOM document object model learn

    DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...

  8. JavaScript的理解记录（5）

    ---接上篇: 三.DOM解析: 1.Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Te ...

  9. BOM和DOM

    Day 01 正课: 1.什么是DOM: 2.DOM Tree 3.遍历DOM树: 1.什么是DOM: 原生js=ECMAScript(核心语法)+ DOM(专门操作网页内容的API)+ 3天 BOM ...

随机推荐

  1. ORACLE常用修改字段脚本

    describe employees; = select column_name,data_type,nullable,data_length,data_ precision,data_scale f ...

  2. 编辑器sublime(转)摘自网络

    一.下载和安装 Sublime Text2是一款开源的软件,不需要注册即可使用(虽然没有注册会有弹窗,但是基本不影响使用). 下载地址:http://www.sublimetext.com/,请自行根 ...

  3. idea中代码费格式化 ctrl+alt+L

    idea中代码费格式化   ctrl+alt+L

  4. 【LeetCode】Valid Parentheses(有效的括号)

    这道题是LeetCode里的第20道题. 题目要求: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭 ...

  5. CSAPP学习笔记—虚拟内存

    CSAPP学习笔记—虚拟内存 符号说明 虚拟内存地址寻址 图9-12展示了MMU如何利用页表来实现这种映射.CPU中的一个控制寄存器,页表基址寄存器(Page Table Base Register, ...

  6. 【bzoj2597】[Wc2007]剪刀石头布 动态加边费用流

    题目描述 在一些一对一游戏的比赛(如下棋.乒乓球和羽毛球的单打)中,我们经常会遇到A胜过B,B胜过C而C又胜过A的有趣情况,不妨形象的称之为剪刀石头布情况.有的时候,无聊的人们会津津乐道于统计有多少这 ...

  7. LA 4728 旋转卡壳算法求凸包的最大直径

    #include<iostream> #include<cstdio> #include<cmath> #include<vector> #includ ...

  8. AC日记——[SDOI2009]晨跑 bzoj 1877

    1877: [SDOI2009]晨跑 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 2131  Solved: 1142[Submit][Status][ ...

  9. 关于css虚线

    今天遇到几个虚线效果,不能一下子反应过来具体属性. 一.dashed和dotted的区别 首先是dashed和dotted都是指“虚线”,但是两者显示的效果不尽相同. 从字面意思来看, dashed: ...

  10. avi视频文件提取与合并

    最近在做一个avi视频文件的提取与合并,花了几天熟悉avi文件格式.制作了一个提取与合并的动态库,不过仅限于提取视频,视频的合并还没添加一些额外判断,可能导致不同分辨率的视频文件合成后不能播放.欢迎大 ...