js通过Class Name获取一个对象的数组

DOM 提供了一个名为 getElementById() 的方法,这个方法将返回一个对象,这个对象就是参数 id 所对应的元素节点。另外,getElementByTagName() 方法会返回一个对象的数组,每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题,能不能通过标签的类名class name来获取该对象呢?下面是这个猜想的程序实现(支持多个class查询和在某个范围内进行查询):


/*
02  * 根据元素clsssName得到元素集合
03  * @param fatherId 父元素的ID,默认为document
04  * @tagName 子元素的标签名
05  * @className 用空格分开的className字符串
06  */
07 function getElementsByClassName(fatherId,tagName,className){
08     node = fatherId&&document.getElementById(fatherId) || document;
09     tagName = tagName || "*";
10     className = className.split(" ");
11     var classNameLength = className.length;
12     for(var i=0,j=classNameLength;i<j;i++){
13         //创建匹配类名的正则
14         className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)");
15     }
16     var elements = node.getElementsByTagName(tagName);
17     var result = [];
18     for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性
19         var element = elements[i];
20         while(className[k++].test(element.className)){//优化循环
21             if(k === classNameLength){
22                 result[result.length] = element;
23                 break;
24             }  
25         }
26         k = 0;
27     }
28     return result;
29 }
测试



<div id="container">
2     <span class="aaa zzz ccc"></span>
3     <div class="aaa bbb ccc"></div>
4 </div>
5 <div class="aaa bbb ccc"></div>
1 window.onload = function(){
2     alert(getElementsByClassName(document,"div","aaa ccc").length);//2
3     alert(getElementsByClassName("container","div","aaa ccc").length);//1
4     alert(getElementsByClassName("container","span","aaa zzz").length);//1
5 }



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要合并一个对象数组,可以使用concat()方法将两个数组连接起来。首先,创建一个数组作为结果数组。然后,使用concat()方法将要合并的数组与结果数组连接起来。通过这个操作,可以将两个数组中的元素合并成一个新的数组。以下是一个示例代码: ```javascript var array1 = [{name: "Alice", age: 25}, {name: "Bob", age: 30}]; var array2 = [{name: "Charlie", age: 35}, {name: "David", age: 40}]; var mergedArray = array1.concat(array2); // mergedArray: [{name: "Alice", age: 25}, {name: "Bob", age: 30}, {name: "Charlie", age: 35}, {name: "David", age: 40}] ``` 在这个示例中,array1和array2是要合并的对象数组。通过使用concat()方法,我们将array1和array2连接在一起,并将结果赋值给mergedArray。最终的mergedArray将包含两个数组中的所有元素。 需要注意的是,合并后的数组一个全新的数组,原始的数组并不会发生改变。 参考资料: JavaScript Array concat() Method. (n.d.). Retrieved from https://www.w3schools.com/jsref/jsref_concat_array.asp<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JS合并两个数组的3种方法详解](https://download.csdn.net/download/weixin_38677648/13674135)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [JavaScript如何把两个数组对象合并过程解析](https://download.csdn.net/download/weixin_38569219/12934912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [一个简化的ERP管理系统示例代码,包含了常见的模块,包括HTML、CSS和JavaScript(附详细操作步骤).txt](https://download.csdn.net/download/weixin_44609920/88237534)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值