js 通过class获取元素实例小结
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 今天来给大家介绍js 通过class获取元素实例，这里有两个实例，如果你有兴趣不防进入参考一下，非常不错的两个js通过class获取元素与属性的实例。...
|
今天看百度-web前端开发工程师-笔试题，发现了一个自己长久以来忽视的问题。
曾经有同事用我写的代码去取元素，结果没取到。原因的话，我相信是因为她写的类名中有“-”，这个在正则中会被当作元字符来处理。所以代码可以像那个前端所写的那样：
| 代码如下 |
复制代码 |
|
var Tea = (function(){
function getElementsByClassName(className,tag,parent){
//".all" 是 DHTML www.111cn.net中的用法，当 tag 等于 "*" 时，
//如果浏览器支持 ".all" 就用，否则，用标准DOM方法
var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
var matchingElements= new Array();
//因为 '-' 是正则表达式中的元字符，而 className 中 '-' 是合法的，
//所以，当把 className 写入正则表达式之前，要先转义 '-'
className=className.replace(/-/g,"\-");
var regex=new RegExp("(^|\b)"+className+"(\b|$)");
var element;
for(var i=0;i<allTags.length;i++){
element=allTags[i];
if(regex.test(element.className)){
matchingElements.push(element);
}
}
return matchingElements;
}
return {
getElementsByClassName : getElementsByClassName
};
})();
|
群里面的99兄，告诉小弟说，现在一般不流行这样的匹配方式了，可以采用以下方式：
| 代码如下 |
复制代码 |
|
(' ' +className.toLowerCase() + ' ').indexOf(' ' +要判断的class+ ' ') !== -1
|
例2
| 代码如下 |
复制代码 |
|
<html>
<head>
<script type="text/javascript">
window.onload = function()
{ var topMenus = getClass('li','topMenu');
for(var i=0;i < topMenus.length; i++)
{
alert(topMenus[i].innerHTML);
}
}
function getClass(tagName,className) //获得标签名为tagName,类名className的元素
{
if(document.getElementsByClassName) //支持这个函数
{ return document.getElementsByClassName(className);
}
else
{ var tags=document.getElementsByTagName(tagName);//获取标签
var tagArr=[];//用于返回类名为className的元素
for(var i=0;i < tags.length; i++)
{
if(tags[i].class == className)
{
tagArr[tagArr.length] = tags[i];//保存满足条件的元素
}
}
return tagArr;
}
}
</script>
</head>
<body>
<ul id="nav">
<li class="topMenu"><a href="#">这里全部是产品介绍</a>
<ul class="subMenu">
<li><a href="#">这里全部是产品1</a></li>
<li><a href="#">这里全部是产品2</a></li>
<li><a href="#">这里全部是产品3</a></li>
<li><a href="#">这里全部是产品4</a></li>
<li><a href="#">这里全部是产品5</a></li>
<li><a href="#">这里全部是产品6</a></li>
</ul>
</li>
<li class="topMenu"><a href="#">服务介绍</a>
<ul class="subMenu">
<li><a href="#">服务1</a></li>
<li><a href="#">服务2</a></li>
<li><a href="#">服务3</a></li>
<li><a href="#">服务4</a></li>
</ul>
</li>
<li class="topMenu"><a href="#">成功案例</a>
<ul class="subMenu">
<li><a href="#">案例1</a></li>
<li><a href="#">案例2</a></li>
<li><a href="#">案例3</a></li>
<li><a href="#">案例4</a></li>
</ul>
</li>
<li class="topMenu"><a href="#">关于我们会找你的</a>
<ul class="subMenu">
<li><a href="#">我们会找你的1</a></li>
<li><a href="#">我们会找你的2</a></li>
<li><a href="#">我们会找你的3</a></li>
<li><a href="#">我们会找你的4</a></li>
</ul>
</li>
<li class="topMenu"><a href="#">这里会联系我们会找你的我们会找你的</a>
<ul class="subMenu">
<li><a href="#">这里会联系我们会找你的1</a></li>
<li><a href="#">这里会联系我们会找你的2</a></li>
<li><a href="#">这里会联系我们会找你的3</a></li>
<li><a href="#">这里会联系我们会找你的4</a></li>
<li><a href="#">这里会联系我们会找你的5</a></li>
<li><a href="#">这里会联系我们会找你的6</a></li>
<li><a href="#">这里会联系我们会找你的7</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
|
