论坛首页 Web前端技术论坛

根据类名来获得Dom元素

浏览 4105 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-06-30   最后修改:2010-07-01
给全局对象document添加一个getElementsByClassName方法.这样就可以通过类名来获得Dom对象了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">

/**
 * 根据类名获得元素
 * 参数说明:
 *      1、className 类名
 *      2、tag 元素名 默认所有元素
 *      3、elm 父元素 默认doucment
 */
document.getElementsByClassName = function(className, tag, elm) {
        var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
        for(var i=0; i<length; i++){
            current = elements[i];
            if(testClass.test(current.className)){
                returnElements.push(current);
            }
        }
        return returnElements;
    }



window.onload = function(){
    var divs = document.getElementsByClassName("div");
	alert(divs.length);
	for(var i = 0; i < divs.length; i++){
	    alert(divs[i].id);
	}
}
</script>
</head>

<body>

    <div class="div" id="div1">
    </div>
    <div class="divvvv" id="div2">
        <div class="div" id="div21">
        </div>
    </div>
    <div class="div" id="div3">
    </div>

    </body>
</html>
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics