发几个浏览器兼容获取元素的函数!
时间:2009-05-11
来源:互联网
首先第一个:
function $prev(){
var o=(typeof(arguments[0])=='object')?(arguments[0].previousSibling):$(arguments[0]).previousSibling;
return o.nodeType==1?o:$prev(o);
}
示例代码:
<div></div>
<div id=a>
<p></p>
<p></p>
</div>
当我们要选择a对象的上面那个空DIV的时候使用下面
function $(){return document.getElementById(arguments[0])}
$('a').previousSibling;
$()这个函数应该都知道吧,如果像上面这样获取的话在IE里没什么问题,但在FF下就有问题,因为你在id=a这个DIV前面不小心留下了一个空格,FF下获取到的就是这个空格文本节点;
现在我再来解释下$prev这个函数,先判断传进来的参数是不是一个对象(object),如果是就取它的previousSibling,如果不是就用这个$()获取这个对象,然后再取他的previousSibling;
然后判断他的节点类型如果等于1就返回这个对象,如果不是,递归调用这个$prev()函数,就比如上面这个示例代码,FF下第一次获取的是那个空白,然后又把空白节点传给$prev(),第二次调用的时候,空白上面的节点就是那个div了,这时候div的节点等于1为真,就返回这个对象了;
var aPrev=$prev('a');//这样获取
这里我使用了previousSibling,但可以延伸出来很多,比如(nextSibling,firstChild,lastChild等)
childNodes有点不同,因为我们是要返回一组元素,我是这样获取的
function $childs(){
var o=(typeof(arguments[0])=='object')?(arguments[0].childNodes):$(arguments[0]).childNodes,oArray=[];
for(var i=0,j=o.length;i<j;i++){if(o.nodeType==1)oArray.push(o);else continue}
return oArray;
}
function $prev(){
var o=(typeof(arguments[0])=='object')?(arguments[0].previousSibling):$(arguments[0]).previousSibling;
return o.nodeType==1?o:$prev(o);
}
示例代码:
<div></div>
<div id=a>
<p></p>
<p></p>
</div>
当我们要选择a对象的上面那个空DIV的时候使用下面
function $(){return document.getElementById(arguments[0])}
$('a').previousSibling;
$()这个函数应该都知道吧,如果像上面这样获取的话在IE里没什么问题,但在FF下就有问题,因为你在id=a这个DIV前面不小心留下了一个空格,FF下获取到的就是这个空格文本节点;
现在我再来解释下$prev这个函数,先判断传进来的参数是不是一个对象(object),如果是就取它的previousSibling,如果不是就用这个$()获取这个对象,然后再取他的previousSibling;
然后判断他的节点类型如果等于1就返回这个对象,如果不是,递归调用这个$prev()函数,就比如上面这个示例代码,FF下第一次获取的是那个空白,然后又把空白节点传给$prev(),第二次调用的时候,空白上面的节点就是那个div了,这时候div的节点等于1为真,就返回这个对象了;
var aPrev=$prev('a');//这样获取
这里我使用了previousSibling,但可以延伸出来很多,比如(nextSibling,firstChild,lastChild等)
childNodes有点不同,因为我们是要返回一组元素,我是这样获取的
function $childs(){
var o=(typeof(arguments[0])=='object')?(arguments[0].childNodes):$(arguments[0]).childNodes,oArray=[];
for(var i=0,j=o.length;i<j;i++){if(o.nodeType==1)oArray.push(o);else continue}
return oArray;
}
节点编号: | 节点名称: |
1 | Element |
2 | Attribute |
3 | Text |
4 | CDATA Section |
5 | Entity Reference |
6 | Entity |
7 | Processing Instrucion |
8 | Comment |
9 | Document |
10 | Document Type |
11 | Document Fragment |
12 | Notation |
作者: donnier 发布时间: 2009-05-11
不错,顶个
作者: wlxm007 发布时间: 2009-05-12
JS是很强大的。
作者: luzhou 发布时间: 2009-05-12
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28