nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:
此属性可以返回当前节点的下一个同级节点。
如果下一个同级节点不存在,则此属性返回值是null。
语法结构:

elementNode.nextSibling

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  var oshow=document.getElementById("show");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    oshow.innerHTML=lis[1].nextSibling.nodeType;
  }
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

以上代码可以获取下一个节点的类型,并将类型写入div元素中去。
浏览器兼容:
此属性具有一定的浏览器兼容性问题,在IE9和IE9以上浏览器还有谷歌或者火狐等标准浏览器中,空白和换行算作文本节点,但是在IE9以下浏览器中,会忽略空白和换行。
相关阅读:
1.nodeType属性可以参阅js的nodeType属性用法简单介绍一章节。
2.节点相关内容可以参阅javascript的DOM元素节点操作简单介绍一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14023

更多内容可以参阅:http://www.softwhy.com/javascript/

时间: 2024-08-04 19:43:38

nextSibling属性用法简单介绍的相关文章

js的nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:此属性可以返回当前节点的下一个同级节点.如果下一个同级节点不存在,则此属性返回值是null.语法结构: elementNode.nextSibling 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softw

js的table表格对象的rows属性用法简单介绍

js的table表格对象的rows属性用法简单介绍:rows作用正如其拼写一样,是用来获取一个行的集合,也就是表格中行的集合.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

HTML5的autofocus属性用法简单介绍

HTML5的autofocus属性用法简单介绍: 本章节简单介绍一下HTML5中新增的一个属性autofocus,它可以让一个元素加载后获取焦点,在此之前一般要通过使用javascript的focus()方法实现我们的要求,非常的简单,代码如下: <input type="text" autofocus="autofocus" /> <textarea autofocus="autofocus">蚂蚁部落</text

CSS3的calc()用法简单介绍

CSS3的calc()用法简单介绍:calc是calculate(计算的意思)缩写.从calc()的外表来看,它类似于程序语言中的方法,具有计算功能.确实如此,它可以动态的计算css中一些元素的相关属性值,能够运用简单的"+"."-"."*"."/"四则运算.基本规则如下:(1).可以使用百分比.px.em.rem等单位.(2).可以混合使用各种单位进行计算.下面看几个代码片段: .box{ border:1px solid

getAttribute()用法简单介绍

getAttribute()用法简单介绍:此方法返回指定属性名的属性值.语法结构: element.getAttribute(attributename) 参数解析:attributename:必需,要获得属性值的属性名称. 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="h

&lt;iframe&gt;用法简单介绍

<iframe>用法简单介绍:本章节简单介绍一下<iframe>标签的用法,因为当前它在很多效果中都有应用,并且也非常的好用,本站的手机网站模板下载的演示效果就是利用<iframe>实现的,下面简单介绍一下次标签的用法.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author"

$.extend()和$.fn.extend()函数用法简单介绍

$.extend()和$.fn.extend()函数用法简单介绍:标题中的两个方法在jQuery插件开发中非常的重要,下面通过简单的代码实例介绍一下它们的用法.本章节不会介绍它的原理,而是只给出它们的作用是什么,能够做什么事情.jQuery.extend()可以为jQuery类添加新的方法,类似于c#或者java中的静态方法.jQuery.fn.extend()可以为jQuery的对象实例添加新的方法.代码实例: <!DOCTYPE html> <html> <head>

Urllib.request用法简单介绍(Python3.3)

Urllib.request用法简单介绍(Python3.3),有需要的朋友可以参考下. urllib是Python标准库的一部分,包含urllib.request,urllib.error,urllib.parse,urlli.robotparser四个子模块,这里主要介绍urllib.request的一些简单用法. 首先是urlopen函数,用于打开一个URL: # -*- coding:utf-8 -*- #获取并打印google首页的htmlimport urllib.requestre

java中equals以及==的用法(简单介绍)

简单介绍 equals方法是java.lang.Object类的方法 有两种用法说明: 一.对于字符串变量来说,使用"=="和"equals()"方法比较字符串时,其比较方法不同. 1."=="比较两个变量本身的值,即两个对象在内存中的首地址. (java中,对象的首地址是它在内存中存放的起始地址,它后面的地址是用来存放它所包含的各个属性的地址,所以内存中会用多个内存块来存放对象的各个参数,而通过这个首地址就可以找到该对象,进而可以找到该对象的各