DOM 提供了一个名为 getElementById() 的方法,这个方法将返回一个对象,这个对象就是参数 id 所对应的元素节点。另外,getElementByTagName() 方法会返回一个对象的数组,每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题,能不能通过标签的类名class name来获取该对象呢?下面是这个猜想的程序实现(支持多个class查询和在某个范围内进行查询):
07
function
getElementsByClassName(fatherId,tagName,className){
08
node = fatherId&&document.getElementById(fatherId) || document;
09
tagName = tagName ||
"*"
;
10
className = className.split(
" "
);
11
var
classNameLength = className.length;
12
for
(
var
i=0,j=classNameLength;i<j;i++){
14
className[i]=
new
RegExp(
"(^|\\s)"
+ className[i].replace(/\-/g,
"\\-"
) +
"(\\s|$)"
);
16
var
elements = node.getElementsByTagName(tagName);
18
for
(
var
i=0,j=elements.length,k=0;i<j;i++){
19
var
element = elements[i];
20
while
(className[k++].test(element.className)){
21
if
(k === classNameLength){
22
result[result.length] = element;
测试
2
<
span
class
=
"aaa zzz ccc"
></
span
>
3
<
div
class
=
"aaa bbb ccc"
></
div
>
5
<
div
class
=
"aaa bbb ccc"
></
div
>
1
window.onload =
function
(){
2
alert(getElementsByClassName(document,
"div"
,
"aaa ccc"
).length);
3
alert(getElementsByClassName(
"container"
,
"div"
,
"aaa ccc"
).length);
4
alert(getElementsByClassName(
"container"
,
"span"
,
"aaa zzz"
).length);