<!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. centos 安装 yum apt

    以下地址 http://download.csdn.NET/detail/mimi00x/8081263 执行安装命令 rpm -i rpmforge-release-0.5.3-1.el7.rf.x ...

  2. 关于网络IP地址的分类

    一.IP地址的分类 众所周知,IP地址都是以点号.分为4段来表示.不同类的IP前几位的表示含义也不尽相同. 1.A类IP [网络地址] 第一位表示网络地址,且第一个字节的第一位必须以0开头.依据此原则 ...

  3. IOS 自动布局-UIStackPanel和UIGridPanel(三)

    在这一篇了我将继续讲解UIGridPanel. 在iphone的app里面可以经常看到一些九宫格布局的应用,做过html开发的对这类布局应该是很熟悉的.在IOS中要实现这样的布局方法还是蛮多的,但是我 ...

  4. 八、docker的常用命令

    1 Docker常用命令 1.1 存储镜像 如果要导出镜像到本地文件,可以使用 docker save 命令. docker save -o log_v140.tar docker.io/vmware ...

  5. ppp详解

    ppp   一   PPP     point to point protocol               数据链路层协议 PPP session establishment 1 link est ...

  6. ubuntu添加开机启动

    vim /etc/init.d/mytest #!/bin/sh echo "$(pwd) and $USER and $(whoami)" >> /root/temp ...

  7. 【Luogu】P1312Mayan游戏(暴搜)

    题目链接 由于是暴搜题,所以这篇博客只讲怎么优化剪枝,以及一些细节. 模拟消除思路:因为消除可以拆分成小的横条或竖条,而这些条的长度至少为三,所以一块可消除的区域至少会有一个中心点.这里的中心点可以不 ...

  8. BZOJ3122 [Sdoi2013]随机数生成器 【BSGS】

    题目 输入格式 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数. 接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. 注意:P一定为质数 输出 ...

  9. 【2018.10.4】CXM笔记(图论)

    .1.给你一个无向图,问这张图的最小割是否唯一.输出yes或no. 跑一边最大流,那么最小割的那些正向边一定满流(也就是过不了了).所以在残余网络上,从S到T和从T到S各广搜找一组最小割的边(即正向边 ...

  10. uva 11021

    题意:有k只麻球,每只活一天就会死亡,临死之前可能会生出一些新的麻球.具体来说,生i个麻球的概率为pi.给定m,求m天后所有麻球死亡的概率.注意,不足m天时就已经全部死亡的情况也算在内. 分析:由于每 ...