Javascript:getElementsByClassName

背景：

由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况，所以，这里舍弃了原生的方法调用

方法一:

function getElementByClassName(parent,tagName,className) {/**参数说明：*@parent:父元素，默认为document*@tagName：子元素的标签名*@className： 用空格分开的className字符串*/var aEls=parent.getElementsByTagName(tagName);var arr=[];for(var i=0;i<aEls.length;i++){var aClassName=aEls[i].className.split(' ');//注意，是用' '(空格)拆分for(var j=0;j<aClassName.length;j++){if(aClassName[j] == className){arr.push(aEls[i]);break;}}}return arr;
}

方法二：

function getElementByClassName(parent,tagName,className) {/**参数说明：*@parent:父元素，默认为document*@tagName：子元素的标签名*@className： 用空格分开的className字符串*/var aEls=parent.getElementsByTagName(tagName);var arr=[];for(var i=0;i<aEls.length;i++){if(aEls[i].classList.contains(className)){arr.push(aEls[i]);}}return arr;
}

测试：

<div id="area"><p class="p1">1</p><p class="p1">2</p><p class="p2 p3">3</p><p class="p1 p3">4</p><p class="p2 p2">5</p>
</div><script type="text/javascript">
var oArea=document.getElementById('area');
var aP1=getElementByClassName(oArea,'p','p1');
var aP2=getElementByClassName(oArea,'p','p2');console.log(aP1);
console.log(aP2);</script>

方法一，测试结果：

方法二，测试结果：

了解更多：

1#支持多个class查询和在某个范围内进行查询的getElementsByClassName实现

http://www.cnblogs.com/fool/archive/2010/10/09/1846424.html

2#getElementsByClassName的理想实现

http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html

转载于:https://www.cnblogs.com/kevinCoder/p/4605277.html

Javascript:getElementsByClassName相关推荐

深入理解javascript选择器API系列第二篇——getElementsByClassName
前面的话既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByClassName()呢?id属性.标签名.class属性并没有 ...
html+dom+chm,HTML DOM getElementsByClassName() - JavaScript - 菜鸟学堂-脚本之家
HTML DOM getElementsByClassName() 方法实例获取所有指定类名的元素: var x = document.getElementsByClassName("e ...
用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
翻译-高质量JavaScript代码书写基本要点(转载)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:S ...
如何获取HTML元素对应JavaScript对象？
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
我与前端之间不得不说的三天两夜之javaScript
前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后 ...
javascript选择器_如何通过选择正确JavaScript选择器来避免沮丧
javascript选择器选择器如何影响代码的快速指南 (A quick guide on how selectors affect your code) While working on a pr ...
javascript 代码_如何使您JavaScript代码保持简单并提高其可读性
javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...
css菜单缓慢滑动_如何使用HTML，CSS和JavaScript构建滑动菜单栏
css菜单缓慢滑动 by Supriya Shashivasan 由Supriya Shashivasan 如何使用HTML,CSS和JavaScript构建滑动菜单栏 (How to build a ...

Javascript:getElementsByClassName

Javascript:getElementsByClassName相关推荐

最新文章

热门文章