Javascript - 无法让“getElementsByClassName”工作答案

【问题标题】：Javascript - Can't get 'getElementsByClassName' workingJavascript - 无法让“getElementsByClassName”工作
【发布时间】：2015-04-07 20:53:40
【问题描述】：

我正在努力弄清楚为什么我的代码不起作用。这是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。

【问题讨论】：

标签： javascript jquery html web

【解决方案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
    });
}

【讨论】：

【解决方案2】：

那是因为document.getElementsByClassName() 返回一个node list，它类似于一个数组。

因此，如果您有多个要定位的元素，则必须使用 for 循环或 .forEach() 遍历它们，但如果您只查找此类的第 n 个元素，则可以指定它的索引用括号表示：

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

【讨论】：

【解决方案3】：

因为getElementsByClassName return an array-like object of DOM elements。

您需要访问每个元素并单独附加事件侦听器：

for (var i = 0; i < showmenu.length; i++ ) {
    showMenu[i].addEventListener( clickevent, function( ev ) {
        // ...
    });
}

..或：

Array.prototype.forEach.call(showMenu, function(el, i) {
    el.addEventListener( clickevent, function( ev ) {
        // ...
    });
});

【讨论】：