为什么不能用 getElementByClassName获取element元素
来源：7-4 自定义audio-js（1）
weibo_我是LUFFCIER_0
2020-10-05 09:43:46
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.outerNode{width: 505px;height: 406px;position: absolute;left: 50%;top: 50%;margin: -204px 0 0 -253.5px;border: 1px solid #a6a18d;border-radius:8px;box-shadow: 0 0 16px #a6a18d; }
.innerNode{width: 503px;height: 405px;border-top:1px solid #e1d1b9;border-left:1px solid #ceccbf;border-radius: 8px;overflow: hidden;border-right:1px solid #ceccbf; }
.topNode{width: 100%;height: 198px;border-bottom: 1px solid #787463;background: url(music/pic/fmt01.jpg) center center;background-size:cover; }
.lineNode{
width: 100%;height: 46px;border-top: 1px solid #f9f7ee;border-bottom: 1px solid #a29d8a;background: url(musicimage/linebg.jpg) repeat-x;
}
.progressNode{width: 440px;height: 18px;float: left;margin:13px 0 0 28px;background: url(musicimage/progressbg.jpg) repeat-x;position: relative; }
.progressNode .progressleft{
width: 7px;height: 100%;position: absolute;left: 0;
background: url(musicimage/leftNode.jpg);
}
.progressNode .progressright{
width: 7px;height: 100%;position: absolute;right: 0;
background: url(musicimage/rightNode.jpg);
}
.bottomNode{
width: 100%;height: 157px;border-top: 1px solid #a29d8a;
background: url(musicimage/bottombg.jpg) repeat-x;position: relative;
}
.lastNode{width: 75px;height: 74px;position: absolute;background: url(musicimage/lastBg.png) no-repeat;left: 118px;top: 39px;cursor: pointer;}
.playNode{width: 95px;height: 94px;position: absolute;background: url(musicimage/playNode.png) no-repeat;left: 202px;top: 29px;cursor: pointer;}
.nextNode{width: 75px;height: 74px;background: url(musicimage/rightbg.png) no-repeat;position: absolute;left: 306px;top: 39px;cursor: pointer;}
.volumeNode{width: 37px;height: 32px;background: url(musicimage/volume.png) no-repeat; position: absolute;right: 43px;top: 58px;cursor: pointer;}
</style>
</head>
<body>
<!-- outerNode 最外层的元素 -->
<div class='outerNode'>
<!-- innerNode 内层元素 -->
<div class='innerNode'>
<!-- topNode 封面图元素 -->
<div class='topNode'></div>
<!-- lineNode 进度条元素 -->
<div class='lineNode'>
<!-- 进度条-->
<div class='progressNode'>
<div class='progressleft'></div>
<div class='progressright'></div>
</div>
</div>
<!-- bottomNode 空间元素 -->
<div class='bottomNode'>
<!-- lastNode 上一曲的按钮-->
<div class='lastNode'></div>
<!-- playNode 播放暂停的按钮 -->
<div class='playNode'></div>
<!-- nextNode 下一曲的按钮 -->
<div class='nextNode'></div>
<!-- volumeNode 静音或非静音的按钮-->
<div class='volumeNode'></div>
</div>
</div>
</div>
<script type="text/javascript">
var myAudio = new Audio();
myAudio.src='music/mus/AcousticGuitar1.mp3';
var playNode=document.getElementByClassName('.playNode');
playNode.onclick=function(){
myAudio.play();
}
</script>
</body>
</html>
3回答
-
好帮手慕久久
2020-10-09
同学你好，可以使用“document.getElementsByClassName('playNode')[0]”获取元素，由于同学将getElementsByClassName这个单词写错了，写成了“getElementsClassName”，所以没有效果，正确代码如下：
同学仔细看下自己写的代码，再检查一下。
祝学习愉快！
0 -
好帮手慕久久
2020-10-08
同学你好，“鹿目焰”这位同学的说法是对的，没有getElementByClassName方法，要写成getElementsByClassName，如下：
而且getElementsByClassName方法获取到的结果是一个类似数组的结构，如下：
同学打印看一下。
如果我的回答帮到了你，望采纳，祝学习愉快！
0h020-10-08 -
鹿目焰
2020-10-07
好像没有getElementByClassName，只有getElementsByClassName吧，使用getElementsByClassName获取元素时，括号里的类名称前面不用加' . '，就像使用getElementById获取元素时，括号里的id名不用加' # '一样。
0
相似问题