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等其他常用标签元素属性来获取其属性。
相关推荐
-
nextSibling
家庭保姆 家庭保姆 家庭保姆 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
只能是字母或数字或者是字母和数字的组合的正则previousSibling
[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; }
-
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="
-
js nextSibling属性和previousSibling属性概述及使用注意
1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 先来看一个例子: 复制代码 代码如下: <body> <div> <input id="a4" type="button" onclick="alert(this.nextSibling);" va
-
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> <
随机推荐
- [PHP]实用函数5
- Angular+Node生成随机数的方法
- Java常用的一些多媒体文件基本操作方法简介
- iOS下PDF文件的浏览和涂鸦效果的简单实现
- asp.net下经典数据库记录分页代码
- 详解使用fetch发送post请求时的参数处理
- javascript实现俄罗斯方块游戏的思路和方法
- Linux下安装配置nginx详解
- smarty获得当前url的方法分享
- python中使用序列的方法
- C++中 map的基本操作
- IE下写xml文件的两种方式(fso/saveAs)
- VBS教程:函数-CDbl 函数
- 基于jquery跨浏览器显示的file上传控件
- jquery animate 动画效果使用说明
- 谈谈对Java多态性的一点理解
- Java struts2捕获404错误的方法汇总
- Java运算符>、>>、>>>三者的区别
- 使用UITextField限制输入金额是正确小数
- 详解Android中OkHttp3的例子和在子线程更新UI线程的方法