<!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. Idea使用Tomcat乱码 tomcat 9.0 8.5.37乱码

    使用新版tomcat 如8.5.37,9.0.14的时候idea控制台输出乱码,很简单老版本的如8.5.31就不会乱码,使用比较工具比较一下发现如下变化, 关键的关键是\apache-tomcat-8 ...

  2. jq:mouseover和mouseout多次触发解决办法

    区别: mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mou ...

  3. linux相关技术

    1.查询服务器tcp连接状态及连接数 netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'

  4. wordpress需要FTP用户名密码的问题

    wordpress安装删除插件需要FTP用户名密码的问题 方法一: 服务器命令操作: 1.在wordpress目录下面wp-config.php末尾加入下面代码:  if(is_admin()) {  ...

  5. linux下连接到远程主机，用图像界面(想在远程服务器上用cmake)

    1. 需要通过SSH -X username@ip登陆服务器后,再用图形界面,比如用cmake 2.直接用 SSH username@ip命令登陆服务器后,不能用cmake

  6. MATLAB（1）

    前言 之前经常用MATLAB,却不小心停留在了舒适区,连基本的调试方法都没有掌握.本文主要是对MATLAB程序调试中的一般方法进行总结,也是自己学习的记录.全文大致分为三个段落: 1)代码内调试: 2 ...

  7. 洛谷 P 1119 灾后重建

    题目背景 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路才能 ...

  8. [Poi2010]Bridges 最大流+二分答案 判定混合图欧拉回路

    https://darkbzoj.cf/problem/2095 bzoj 相同的题挂了,这个oj可以写. 题目就是要我们找一条欧拉回路(每个桥经过一次就好,不管方向),使得这条回路上权值最大的尽量小 ...

  9. Linux下的搜索命令grep（转）

    一.简介 grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具, ...

  10. 【spring boot Mybatis】报错：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.newhope.interview.dao.UserMapper.add

    报错如下: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.newhope.i ...