您的位置：首页 > 其它

六（2）.自己动手生产一个getElementsByClass()函数

2009-08-01 14:25 302 查看

六.W3C DOM之旅的第一步,文档访问 .第二节.自己动手生产一个getElementsByClass()函数

3. getElementsByClass() # 通过类名查找元素

getElementsByClass()方法，内建的DOM函数中并没有提供用来实现按类名查找元素的方法，因此我们需要自己动手生产一个函数来完成这一功能。

只要把编写好的getElementsByClass()函数放在我们的js文件里或者封装到我们自己的库里，积少成多就有了像Prototype，
jQuery，Mootools一样的JavaScript
Library了。在我们编写任何JavaScript代码的时候，都可以将类名作为参数使用该函数查找元素组了.

完整的getElementsByClass()函数

function
$(
element)
{

if
(
arguments.length
>
1
)
{

for
(
var
i=
0
,
elements=
[
]
,
length=
arguments.length
;
i<
length;
i++
)
{

elements.push
(
$(
arguments[
i]
)
)
;

}

return
elements;

}

//如果该参数是一个字符串那假设它是一个id

if
(
typeof
element==
"string"
)
{

return
document.getElementById
(
element)
;

}
else
{

return
element;

}

}

/*

第一个参数CSS类名，第二个参数父对象，第三个参数标签名(eg "div"、"li"）

其中第一个参数必选，第二个第三个参数可选

*/

document.getElementsByClassName
=
function
(
className,
parentElement,
tagName)
{

var
children =
(
$(
parentElement)
||
document.body
)
.getElementsByTagName
(
tagName||
'*'
)
;
//兼容IE5.x以上的版本和FF的判断

//var children =document.all?document.all:document.getElementsByTagName("*");//兼容IE5.x版本和FF的判断

var
elements =
[
]
,
child;

for
(
var
i=
0
,
length=
children.length
;
i<
length;
i++
)
{

child =
children[
i]
;

if
(
hasClassName(
child,
className)
)

elements.push
(
child)
;

}

return
elements;

}
;

//判断对象element是否包含指定类className

function
hasClassName(
element,
className)
{

if
(
!
(
element=
$(
element)
)
)
return
false
;

var
elementClassName=
element.className
;

if
(
elementClassName.length
==
0
)
return
false
;

if
(
elementClassName==
className||
elementClassName.match
(
new
RegExp(
"(^|//
s)"
+
className+
"(//
s|$)"
)
)
)

return
true
;

return
false
;

}

测试：

相同类名的div元素

<div
class
=
"c"
>
aaaaa</
div
>

<div
class
=
"c"
>
bbbbb</
div
>

<div
class
=
"c"
>
ccccc</
div
>

<div
class
=
"c"
>
ddddd</
div
>

<div
class
=
"c"
>
eeeee</
div
>

通过getElementsByClass()函数，查找有相同类名的div元素组。

//测试

var
className=
document.getElementsByClassName
(
"c"
)
;

if
(
typeof
className!=
"undefined"
)
{

for
(
var
i=
0
;
i<
className.length
;
i++
)
{

alert
(
className[
i]
.innerHTML
)
;

}

}

完整的getElementsByClass()函数的第二种实现方式

//getElementsByClass()函数的第二种实现方式

document.getElementsByClassName
=
function
(
className)
{

var
allArray=
new
Array(
)
;

var
elements=
new
Array(
)
;

if
(
typeof
document.all
!=
"undefined"
)
{

allArray=
document.all
;
//返回文档中的所有元素

}
else
{

allArray=
document.getElementsByTagName
(
"*"
)
;
//返回文档中的所有元素

}

for
(
var
i=
0
;
i<
allArray.length
;
i++
)
{

var
isClassName=
hasClassName(
allArray[
i]
,
className)
;

if
(
isClassName)
{

elements.push
(
allArray[
i]
)
;

}

}

return
elements;

}
;

//判断对象element是否包含指定类className

function
hasClassName(
element,
className)
{

var
elementClassName=
element.className
;

if
(
elementClassName.length
==
0
)
return
false
;

if
(
elementClassName==
className||
elementClassName.match
(
new
RegExp(
"(^|//
s)"
+
className+
"(//
s|$)"
)
)
)

return
true
;

return
false
;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航