<!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. LeetCode答案(python)

    1. 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这 ...

  2. Web自动化Selenium2环境配置中Selenium IDE的安装

    下载的firefox32.0的版本,但是在附件组件中只有selenuim IDE button,本以为这个就是selenium IDE插件,自以为是的后果就是把自己坑了.并且像一些selenium I ...

  3. 通过 PC 远程控制 Android 的应用 -- 可以将手机屏幕投射显示到电脑上

    测试结果中的部分测试图:Mobizen手机界面: 电脑界面: 主界面 视频 全屏视频 WebKey手机界面: 电脑界面: AirMore手机界面: 电脑界面:主界面 镜像 全屏镜像 Airdroid手 ...

  4. B树总结

    B树是一种平衡的多路查找树,一棵m阶B树或为空树,或满足下列特性: 1.  每个节点之多有m棵子树 2.  若根节点不是叶子节点,则至少有两颗子树 3.  除根之外所有非终端节点至少有[m/2]可子树 ...

  5. 【转】使用信号监控 Django 模型对象字段值的变化

    转载出处:http://blog.csdn.net/pushiqiang/article/details/74949465 Django 信号 (Signals) 的功能类似于 WordPress 的 ...

  6. Python内置函数5

    Python内置函数5 1.format参考前面字符串方法中的format 2.frozenset([iterable]) iterable -- 可迭代的对象,比如列表.字典.元组等等 返回一个冻结 ...

  7. 【bzoj4804】欧拉心算 欧拉函数

    题目描述 给出一个数字N 输入 第一行为一个正整数T,表示数据组数. 接下来T行为询问,每行包含一个正整数N. T<=5000,N<=10^7 输出 按读入顺序输出答案. 样例输入 1 1 ...

  8. BZOJ 4004 [JLOI2015]装备购买 ——线性基

    [题目分析] 题目很简单,就是要维护一个实数域上的线性基. 仿照异或空间的线性基的方法,排序之后每次加入一个数即可. 卡精度,开long double 和 1e-6就轻松水过了. [代码] #incl ...

  9. 刷题总结——电影(ssoi)

    题目: 题目背景 SOURCE:NOIP2014-SXYZ T2 题目描述 小美去看电影,发现这个电影票很神奇,有一个编号 (x,y) 表示为第 x 排第 y 位. 小美是个聪明的女孩子,她有自己的一 ...

  10. Java:Session详解

    以下情况,Session结束生命周期,Servlet容器将Session所占资源释放:1.客户端关闭浏览器2.Session过期3.服务器端调用了HttpSession的invalidate()方法. ...