原生态JS的方法调用CLASS元素标签

2016年4月28日 MK JS 0 阅读 1854次

最近研究起来原生态的js来，主要因为jquery太冗余了，拖慢了网站的访问速度，于是就写下了下面的这段代码来替换$(“.a1”)和$(“.a2”)，希望对你们有用。

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var tagName =  getElementsClass("a1");
            for (var i = 0; i < tagName.length; i++) { 
                tagName[i].innerHTML = "这里自动输入a1内容";
            }
 
            var tagName =  getElementsClass("a2");
            for (var i = 0; i < tagName.length; i++) {
                tagName[i].innerHTML = "这里自动输入a2内容";
            }
        }
       function getElementsClass(classnames){ 
	var classobj= new Array();
	var classint=0;
	var tags=document.getElementsByTagName("*");  
	for(var i in tags){
	if(tags[i].nodeType==1){
		if(tags[i].getAttribute("class") == classnames){ 
		classobj[classint]=tags[i];
		classint++; 
		} 
	} 
	} 
	return classobj;
}
    </script>
</script></head>
<body>
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
<div class="a2"></div>
<div class="a2"></div>
<div class="a2"></div>
<div class="a2"></div>
</body>
</html>

代码预览

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var tagName =  getElementsClass("a1");
           //因为返回的是包含多个元素的数组，所以要遍历一下
            for (var i = 0; i < tagName.length; i++) {
                tagName[i].innerHTML = "这里自动输入a1内容";
            }
            var tagName =  getElementsClass("a2");
            for (var i = 0; i < tagName.length; i++) {
                tagName[i].innerHTML = "这里自动输入a2内容";
            }
        }
       function getElementsClass(classnames){
	var classobj= new Array();
	var classint=0;
	var tags=document.getElementsByTagName("*");
	for(var i in tags){
	if(tags[i].nodeType==1){
		if(tags[i].getAttribute("class") == classnames){
		classobj[classint]=tags[i];
		classint++;
		}
	}
	}
	return classobj;
}
    </script>
</script></head>
<body>
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
<div class="a2"></div>
<div class="a2"></div>
<div class="a2"></div>
<div class="a2"></div>
</body>
</html>

class, js, 原生态

IIS6和IIS7不能解析json文件的方法原生态js方法实现全选复制功能

相关文章

发表回复取消回复