今天看百度-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> |
|
时间： 2024-10-25 20:38:31