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 ...
随机推荐
- failed to execute goal org.apache.maven.plugins:maven-archetype-plugin错误解决方法
使用maven创建project时碰到如下错误: D:\codes\JSF>mvn archetype:create -DgroupId=com.tutorialspoint.test -Dar ...
- PAT Basic 1034
1034 有理数四则运算 本题要求编写程序,计算2个有理数的和.差.积.商. 输入格式: 输入在一行中按照“a1/b1 a2/b2”的格式给出两个分数形式的有理数,其中分子和分母全是整型范围内的整数, ...
- IOS 自动布局-UIStackPanel和UIGridPanel(四)
为什么说scrollview的自动化布局是难点? 对scrollview做自动化布局,无非就是想对scrollview里面的subviews来做自动化布局.但是scrollview里面的subview ...
- OmniGraffler软件和激活码
mac上用户画图的软件:OmniGraffler破解方法 1.激活码 Name: Appked SN: MFWG-GHEB-HYTW-CGHT-CSXU-QCNC-SXU 2.软件连接 链接: htt ...
- 【软考2】Java语言的基本知识汇总
导读:现在对于java这一模块,还没有相应的项目经验,只是通过各种类型的资料,对java有一个面上的了解.现在,对此做一个罗列总结,在以后的学习过程中,逐步完善! 一.语言的发展 1.1,机器语言 在 ...
- 【Luogu】P3758可乐（矩阵优化DP）
题目链接 一开始想到这可能能用矩阵优化,但以为暴力就能卡过……T成二十分 首先我们回顾一下我们的暴力转移方程 用f[i][j][0/1]表示在i时刻,j点,1不爆炸,0已爆炸的方案数,那么f[i][j ...
- 算法复习——splay+启发式合并(bzoj2733-永无乡）
题目: Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通 ...
- P2015 二叉苹果树 (树形动规)
题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定是1. 我们用一根树枝两端连接的结点的编号来 ...
- 【2018.11.8】小迟的比赛 / Yuno like cake / 格子填数
题目 $noip$ 欢乐赛真是欢乐,除了不欢乐的方面以外我都很欢乐. T1 鸡汤题目,故意输对后面的胜率又没有影响,为什么要故意输呢? 所以第二个决策是凑字用的,这题就是朴素递推概率,最后乘结果权值计 ...
- codeblocks 中文编码问题
参考文章: code::blocks 初使用遇到的问题记录 codeblocks 中文编码问题 string var="汉"; cout<<var<<end ...