js nextSibling属性和previousSibling属性概述及使用注意

1：nextSibling属性
该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。
需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：
先来看一个例子：


代码如下:

<body>
<div>
<input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />
<input id="a5" type="button" onclick="alert(this.nextSibling);" 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等其他常用标签元素属性来获取其属性。

赞 (0)

相关推荐

  • javascript中的nextSibling使用陷(da)阱(keng)

    今天写js的时候遇到了一个陷(da)阱(keng) 关于HTML/XML节点的问题 据说在IE中nextSibling不会返回文本节点,而chrome或者firefox等会返回文本节点-- 这个我的工作带来了很严重的问题 在网上搜到了很多处理方法,都是给js添加各种封装的函数-- 后来我发现有个nextElementSibling方法-- 这个不会返回文本节点,不管是什么浏览器-- 真是大坑 同样,对于fistChild有对应的firstElementChild.其他的选择节点的函数应该也有对应

  • javascript中的previousSibling和nextSibling的正确用法

    我做的时间的验证,格式是不需要验证的,只需要验证起始日期与结束日期的大小,但是因为输入页面是批量的,而且每一行又是自动生成的,这样就不能用id来作为参数,只能用节点.这就给验证增加了难度. 以下是jsp页面的部分: <td><input id="warrantyStartDateStr" name="warrantyStartDateStr" class="toolbar_button_input_80" type="

  • nextSibling

    家庭保姆 家庭保姆 家庭保姆 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript nextSibling 与 getNextElement(node) 使用介绍

    1. nextSibing:下一个节点,节点类型可以是任何一种,其中就有文本节点. 2.得到下一个元素节点: 复制代码 代码如下: function getNextElement(node){ if(node.nodeType == 1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }

  • 只能是字母或数字或者是字母和数字的组合的正则previousSibling

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js nextSibling属性和previousSibling属性概述及使用注意

    1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 先来看一个例子: 复制代码 代码如下: <body> <div> <input id="a4" type="button" onclick="alert(this.nextSibling);" va

  • Vue.js中的计算属性、监视属性与生命周期详解

    Vue.js中的计算属性、监视属性与生命周期详解

    前言 本章节咱们来说一下Vue中两个非常重要的计算属性.监视属性和生命周期,不废话直接上干货 计算属性 计算属性介绍 在模板中可以直接通过插值语法显示一些data中的数据,有些情况下我们需要对数据进行转化或者计算后显示,我们可以使用computed选项来计算,这时有些小伙伴可能就会问,我直接定义函数再调用不就行了,为什么还要整一个计算属性呢?这个问题在下边再做解释,我们先来看一下计算属性怎么用! 入门案例 需求 将人的姓和名拼接在一起 代码 <!DOCTYPE html> <html&g

  • js正则表达式之RegExp对象属性lastIndex，lastMatch，lastParen，lastContext，rightContext属性讲解

    1.lastIndex属性,返回匹配内容的最后一个索引位置,也就是下一个匹配的开始位置,注意字符串索引从0开始 代码: //设置要匹配的内容 var objStr="abfdabcd"; //设置匹配的正则表达式 var re=/abc/; //输出匹配前的字符串 document.write("未匹配前的字符串"+objStr+""); //输出匹配的内容 document.write("匹配的内容"+objStr.matc

  • 通过js获取div的background-image属性

    之前没有注意过div的background-image这个属性,只是设置它的url,今天遇到一个问题特此做一下记录. 复制代码 代码如下: <div id="img_2" style="width:133px;height:95px; cursor:pointer; background-image: url('Chrysanthemum.jpg');" onclick="tempClick()"></div> 在js中想

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • JS返回iframe中frameBorder属性值的方法

    本文实例讲述了JS返回iframe中frameBorder属性值的方法.分享给大家供大家参考.具体分析如下: frameborder 属性规定是否显示框架周围的边框. <!DOCTYPE html> <html> <body> <iframe id="myframe" src="/default.asp" frameborder="0"> <p>Your browser does not

  • JS动态给对象添加属性和值的实现方法

    如下所示: var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了,希望大家多多支持我们~

  • 判断JS对象是否拥有某属性的方法推荐

    两种方式,但稍有区别 1,in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 可看到无论是name,还是原形链上的toString,都能检测到返回true. 2,hasOwnProperty 方法 var obj = {name:'jack'}; obj.hasOwnProperty('name'); // --> true obj.

  • JS遍历页面所有对象属性及实现方法

    for...in循环的Javascript示例: <html> <head> <title>一个使用到for...in循环的Javascript示例</title> </head> <body> <script type="text/javascript"> // 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent. var myObject =

  • js 获取html5的data属性实现方法

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dataset</title> <meta charset="utf-8"> </head> <body> <div id='div' data-index='demo'> </div> </body> <

随机推荐