Javascript - 无法让'getElementsByClassName'正常工作

Question

我正在努力弄清楚为什么我的代码不起作用.这是JS的一部分:

function init() {
    var showMenu = document.getElementsByClassName('showMenu'),
        perspectiveWrapper = document.getElementById( 'perspective' ),
        container = perspectiveWrapper.querySelector( '.container' ),
        contentWrapper = container.querySelector( '.wrapper' );

    showMenu.addEventListener( clickevent, function( ev ) {
        ev.stopPropagation();
        ev.preventDefault();
        docscroll = scrollY();
        // change top of contentWrapper
        contentWrapper.style.top = docscroll * -1 + 'px';
        // mac chrome issue:
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        // add modalview class
        classie.add( perspectiveWrapper, 'modalview' );
        // animate..
        setTimeout( function() { classie.add( perspectiveWrapper, 'animate' ); }, 25 );
    });
}

这是HTML的一部分:

<div id="topBar">
    <h1>Company</h1>
    <a href="#" class="entypo-menu showMenu"></a>
</div>

<div class="line"></div>

<div id="fixedBar">
    <h1>Company</h1>
    <a href="#" class="entypo-menu showMenu"></a>
</div>

出于某种原因,当我加载页面时,我收到此错误:

TypeError: undefined is not a function (evaluating 'showMenu.addEventListener')

我不明白这一点,因为如果我改变这一行:

var showMenu = document.getElementsByClassName('showMenu'),

至:

var showMenu = document.getElementById( 'showMenu' ),

它确实有效!

为什么类选择器不起作用,但id会不会？我正在尝试获取与类的两个链接showMenu来执行JS.

Answer 1

document.getElementsByClassName返回与类名匹配的所有元素的类似数组的列表(HTMLCollection确切地说).您可能关心第一个元素,因此请尝试使用以下代码:

var showMenu = document.getElementsByClassName( 'showMenu' )[0],

如果您关心所有元素,则需要遍历元素:

var showMenu = document.getElementsByClassName( 'showMenu' ),

// ...

for ( var i = 0; i < showMenu.length; ++i ) {
    showMenu[i].addEventListener( clickevt, function( ev ) {
        // Your code here
    });
}