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等其他常用标签元素属性来获取其属性。

时间: 2024-10-15 15:08:46

js nextSibling属性和previousSibling属性概述及使用注意_基础知识的相关文章

JS中attr和prop属性的区别以及优先选择示例介绍_基础知识

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes.prop应运而生了. 既然我们想知道他们两的区别,最好就看看他们的源代码,不要被代码长度所吓到,我们只看关键的几句: attr: function( elem, name, value, pass )

Backbone.js 0.9.2 源码注释中文翻译版_基础知识

// Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j

JS创建类和对象的两种不同方式_基础知识

在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数.下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后. var Person = function(name) { // 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类 this.name = name; } function Person(name) { // 直接定

js中top/parent/frame概述及案例应用_基础知识

引用方法top: 该变量永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. parent: 该变量指的是包含当前分割窗口的父窗口.如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口. 附:Window对象.Parent对象.Frame对象.Document对象和Form对象的阶层关系 Windwo对象→Parent对象→Frame对象→Document对象→Form对象

自定义右键属性覆盖浏览器默认右键行为实现代码_基础知识

复制代码 代码如下: function $(id) { return document.getElementById(id); } $('test').oncontextmenu=function() { return false; }; 这样就可以给指定的元素自定义右键菜单

简单了解Backbone.js的Model模型以及View视图的源码_基础知识

Backbone.Model 今天我们先来谈谈Backbone.js MVC 中的 M , Model是backbone的核心部分,包含着页面展示内容的数据,还有围绕着数据操作的各种 转换,校验,计算 ,权限控制,服务端交互等等操作,你可以通过 Backbone.Model.extend() 生成你的model , 当然生成的model也可以作为一个基类去向下扩展更多的model var People = Backbone.Model.extend({ }); var Man = People.

JS、DOM和JQuery之间的关系示例分析_基础知识

DOM(document object model) 其实是浏览器内元素对象的一个总称 我们用JavaScript对网页进行的所有操作都是通过DOM进行的.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知的document.write方法也找不到. 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以

JS 模态对话框和非模态对话框操作技巧汇总_基础知识

模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口. 3.因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父

Ajax的概述与实现过程_基础知识

一.ajax概述 1.Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新技术,而是对现有技术的综合利用.这一技术能够向服务器请求额外数据而无需刷新页面,带来了更好的用户体验 2.Ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性.在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架. 3.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.