javascript - JS这样获取元素为什么会报错？
本文介绍了javascript - JS这样获取元素为什么会报错？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
Uncaught TypeError: oDiv1[i].getElementsByName is not a function
为什么会报这个错误 为什么改成通过id获取就不会报错了？
而且我想要的效果是点击显示按钮时就把按钮对应的左侧的数字显示在下面的蓝色的方块里面 我这样写对吗？
<html>
<head>
<meta charset="utf-8">
<style>
#div2{width:50px;height:50px;background-color: blue;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementsByName('div1');
var oDiv2=document.getElementsByName('div2');
var oShow=document.getElementsByName('show');
var oAge=document.getElementsByName('age');
for(i=0;i<oDiv1.length;i++){
oSh=oDiv1[i].getElementsByName('show'); //这里报错
for(j=0;j<oSh.length;j++){
oSh[j].index=j;
oSh[j].onclick=function(){
age=oAge[this.index].innerHTML;
oDiv2[i].innerHTML=age;
}
}
}
}
</script>
</head>
<body>
<div name="div1">
<span name="age">111</span><span name="show">显示</span><br />
<span name="age">222</span><span name="show">显示</span><br />
<span name="age">333</span><span name="show">显示</span>
<div name="div2" id="div2"></div>
</div>
<div name="div1">
<span name="age">444</span><span name="show">显示</span><br />
<span name="age">555</span><span name="show">显示</span><br />
<span name="age">666</span><span name="show">显示</span>
<div name="div2" id="div2"></div>
</div>
</body>
</html>
解决方案
一、确定改成element.getElementById就不报错了吗？
element只有三个方法
Element.getElementsByTagName
Element.getElementsByClassName
Element.getElementsByTagNameNS
其他的那些都是document的方法。不一样的。
选取元素的时候尽量还是使用class和id。
二、程序运行上也是有问题的。
oDiv2[i].innerHTML=age;这一块。运行的时候去外部查找i的值。外部运行完i已经是2了，所以oDiv2[i]就会是undefined，建议传参或者使用闭包。可能修改的时候还会有连续的错误，先自己修改一下吧。
这篇关于javascript - JS这样获取元素为什么会报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
