手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js nextSibling属性和previousSibling属性概述及使用注意
js nextSibling属性和previousSibling属性概述及使用注意
摘要:1:nextSibling属性该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null...

1:nextSibling属性

该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。

需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:

先来看一个例子:

复制代码 代码如下:

<body>

<div>

<input id="a4" type="button" value="d" />

<input id="a5" type="button" value="e" />

</div>

</bod

该对象的结构表面上看,div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签,无论是生成button、checkbox、radio...等或其他表单控件,IE都会自动在后面创建一个1字节位的空白。

IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextSibling.nextSibling了。

opera和safari对nextSibling的处理方式与FF一致

2:previousSibling属性

该属性与nextSibling属性的作用正好相反。例如:someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身,但前提必须是:该标签元素的后面必须有一个同级的元素,否则就返回null了。

3:通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题

一般先通过nextSibling.nodeName来获知其标签名,或者通过nextSibling.nodeType来获知其标签类型,然后,如果该nextSibling.nodeName = #text,则通过nextSibling.nodeValue来获知其文本值;否则,可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。

【js nextSibling属性和previousSibling属性概述及使用注意】相关文章:

javascript实现Table间隔色以及选择高亮的方法

JavaScript中继承用法实例分析

javascript每日必学之运算符

Node.js的MongoDB驱动Mongoose基本使用教程

JavaScript使用技巧精选

jQuery插件expander实现图片翻转特效

JavaScript中string对象

JavaScript数组去重的3种方法和代码实例

jQuery插件Slider Revolution实现响应动画滑动图片切换效果

JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

精品推荐
分类导航