首页 > 代码库 > tagArr[tagArr.length] = tags[i] 一种非常巧妙的思路
tagArr[tagArr.length] = tags[i] 一种非常巧妙的思路
之前我们封装getByClass方法的时候，一般有一步骤是把匹配的元素推进数组中。
比如 aResult.push(obj[i]);
之前的方法代码：
getByClass:
1 function $class(domclass){ 2 var obj = document.getElementsByTagName(‘*‘); //获取页面内所有DOM元素 3 var aResult = []; //定义一个空数组，用来存放与目标className相同的元素 4 for(var i=0;i<obj.length;i++){ //这个是遍历页面中所有元素然后拿他们的class进行对比。如果和我们传进来的domclass这个参数一样就把他放进数组 aResult中。 5 if(obj[i].className == domclass){ 6 aResult.push(obj[i]); 7 } 8 } 9 return aResult; //返回这个放进了domclass元素的数组10 }11 window.onload = function(){12 alert($class(‘boom‘).length); //获取这些元素的个数13 alert($class(‘boom‘)[0].className); //获取这些元素的第一个元素的className,其实都是一样的className.14 }
css:
1 .boom{2 color:red;3 }
html:
1 <p class="boom">1</p>2 <div>2</div>3 <div class="boom">3</div>4 <ul>5 <li class="boom">4</li>6 <li>5</li>7 </ul>
这是之前的方法，下面我们换一种思路，利用tagArr[tagArr.length] = tags[i] 的思路来讲匹配元素放到这个数组tagArr中。
我们首先来看下这个原理是怎么样的。我写的一个小例子。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .boom{ 8 color:red; 9 }10 </style>11 <script>12 window.onload = function(){13 var tagArr = [];14 alert(tagArr.length); //第一次弹出的是015 tagArr[0] = ‘a‘; //相当于 tagArr[tagArr.length] = ‘a‘;16 alert(tagArr.length); //第二次弹出的是117 tagArr[1] = ‘b‘; //相当于 tagArr[tagArr.length] = ‘b‘; 18 alert(tagArr.length); //第三次弹出的是2;19 }20 </script>21 </head>22 23 <body>24 <div class="boom">1div</div>25 <div>2</div>26 <p class="boom">3</p>27 <ul>28 <li>4</li>29 <li class="boom">5</li>30 </ul>31 <div>6</div>32 <div class="boom">7div</div>33 <div>8</div>34 <div class="boom">9div</div>35 </body>36 </html>
从这里我们可以看出，我定义的tagArr是一个空数组，最开始，tagArr.length是0,
经过tagArr[tagArr.length] = ‘a‘;实际上就是tagArr[0] = ‘a‘;之后，数组tagArr中有了一个元素，那么此时tagArr.length就是1了，
然后不断向下进行。
通过下一个例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .boom{ 8 color:red; 9 }10 </style>11 <script>12 function getClass(tagName,sClass){13 var tags = document.getElementsByTagName(‘div‘); 14 var tagArr = [];15 for(var i=0;i<tags.length;i++){16 if(tags[i].className == sClass){17 tagArr[tagArr.length] = tags[i]; 18 } 19 }20 return tagArr;21 }22 window.onload = function(){23 alert(getClass(‘div‘,‘boom‘).length); 24 }25 </script>26 </head>27 28 <body>29 <div class="boom">1div</div>30 <div>2</div>31 <p class="boom">3</p>32 <ul>33 <li>4</li>34 <li class="boom">5</li>35 </ul>36 <div>6</div>37 <div class="boom">7div</div>38 <div>8</div>39 <div class="boom">9div</div>40 </body>41 </html>
显示结果为3,就是class为boom的div有三个。
因此如果下次再用到getByClass的时候，我们也可以用这种思路了。
tagArr[tagArr.length] = tags[i] 一种非常巧妙的思路
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。