nextSibling和previousSibling
<!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的更多相关文章
- javascript 中的nextSibling和previousSibling使用注意事项
JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返 ...
- nextSibling，previousSibling，childNodes常见错误
在使用nextSibling与previousSibling时,常出现选不到预计对象的情况 eg: <div class="a">1</div> <d ...
- js nextSibling属性和previousSibling属性概述及使用注意
1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不 ...
- nextSibling和lastSibling
在FireFox中包含众多空格作为文本节点,因此在我们使用nextSibling和previousSibling时就会出现问题.因为FireFox会把文本节点误当做元素节点的兄弟节点来处理.我们可以添 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- （第六天）DOM
概念 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 选取文档元素 (1)通过ID选取元素 var id = document.getElementById("se ...
- DOM document object model learn
DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...
- JavaScript的理解记录（5）
---接上篇: 三.DOM解析: 1.Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Te ...
- BOM和DOM
Day 01 正课: 1.什么是DOM: 2.DOM Tree 3.遍历DOM树: 1.什么是DOM: 原生js=ECMAScript(核心语法)+ DOM(专门操作网页内容的API)+ 3天 BOM ...
随机推荐
- How To Configure VMware fencing using fence
本文主要简单介绍一下如何在RHEL 7 Pacemaker中配置一个fence_vmware_soap类型的STONITH设备(仅供测试学习). STONITH是Shoot-The-Other-Nod ...
- 【SQL Server】SQL常用系统函数
SQL常用系统函数 函数类型 函数表达式 功能 应用举例 字符串函数 SubString(表达式,起始,长度) 取子串 SubString('ABCDEFG',3,4) Right(表达式,长度) 右 ...
- Educational Codeforces Round 26
Educational Codeforces Round 26 困到不行的场,等着中午显示器到了就可以美滋滋了 A. Text Volume time limit per test 1 second ...
- 【UML】关联、依赖、泛化、实现等关系说明
导读:再上一篇博客中,介绍了UML的9种图,现在,将对UML中的关系进行总结.图很重要,但图形中的各种关系也很重要,这扯关系的事儿,从来都是大事儿. 一.基本定义 1.1 总体说明 1.2 具体定义 ...
- 刷题总结——书架（bzoj1861）
题解: Description 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然 ...
- mybatis学习（四）——config全局配置文件解析
在全集配置文件中引入dtd约束“http://mybatis.org/dtd/mybatis-3-config.dtd”,主要有以下几个标签,现在详细解释下这几个标签的使用 1.properties属 ...
- uva 10710 快速幂取模
//题目大意:输入一个n值问洗牌n-1次后是不是会变成初始状态(Jimmy-number),从案例可看出牌1的位置变化为2^i%n,所以最终判断2^(n-1)=1(mod n)是否成立#include ...
- 线段树练习5（codevs 4927）
题目描述 Description 有n个数和5种操作 add a b c:把区间[a,b]内的所有数都增加c set a b c:把区间[a,b]内的所有数都设为c sum a b:查询区间[a,b] ...
- angular中多控制器的依赖注入写法
直接看图,每个控制器有自己的名称,第二个参数中有需要注入的依赖对象,最后是我们的自定义函数,这样我们可以以模块化的方式进行书写.
- 网上找的一篇博文，原文搞错了，应该是\r\n,本文已改正！——回车CR和换行line feed
"回车"(carriage return)和"换行"(line feed)与 ASCII表 关于“回车”(carriage return)和“换行”(line ...