在学习Javascript的dom阶段,为了加深对节点的理解,方便日后使用,封装了一下获得classname函数,具体如下:
1 <script> 2 function getByClass(Parent, sClass) { 3 var aEle = Parent.getElementsByTagName('*'); 4 var aReturn = []; 5 for (var i = 0; i < aEle.length; i++) { 6 if (aEle[i].className == sClass) { 7 aReturn.push(aEle[i]); 8 } 9 } 10 return aReturn; 11 }; 12 window.onload = function () { 13 var aUl = document.getElementsByTagName('ul'); 14 var aLi = getByClass(aUl, 'box'); 15 alert(aLi.length); 16 for (var i = 0; i < aLi.length; i++) { 17 aLi[i].style.background = 'red'; 18 } 19 }; 20 </script> 21 </head> 22 23 <body> 24 <ul> 25 <li class="box">1</li> 26 <li class="box">1</li> 27 <li></li> 28 <li></li> 29 <li class="box">1</li> 30 </ul> 31 </body>
发现第三行始终报错:Uncaught TypeError: Parent.getElementsByTagName is not a function
多方测试,发现所有元素获取都正常,形参Parent得到的也是aUl,在网上搜索解决办法也迟迟未果,我便开始了如下尝试:
首先我判断应该是Parent处出现了问题,那么我在13行下加了一行:
var a = document.getElementsByTagName('ul').getElementsByTagName('*');
同样显示报错,所以问题出在了这个getElementsByTagName上。
实际上document.getElementsByTagName()虽然数量是1,但是同样是个数组。
getElementsByTagName()方法的操作对象是一个确定唯一的元素,因此不满足。
将3行改为 var aEle = Parent(0).getElementsByTagName('*'); 即可。
ps:
在获得元素后,可用innerHtml获取和修改元素。