Javascript - 無法獲取'getElementsByClassName'工作

我正在努力弄清楚爲什麼我的代碼不工作。這裏是JS的一部分：Javascript - 無法獲取'getElementsByClassName'工作

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。

來源

2015-02-07 George

document.getElementsByClassName返回與類名匹配的元素列表（HTMLCollection，確切地說）全部元素。你可能關心的第一要素，所以儘量使用替代以下：

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

// ... 

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

來源

2015-02-07 21:06:51 mc10

這是因爲：

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

如果你關心的所有元素，你會通過元素需要循環document.getElementsByClassName()返回node list，與數組類似。所以如果你有多個元素你想要定位，你必須通過for循環或.forEach()循環它們，但是如果你只是尋找這個類的第n個元素，那麼你可以指定它的索引括號表示法：

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

來源

2015-02-07 21:07:02 Natsu

這是因爲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) { 
     // ... 
    }); 
});

來源

2015-02-07 21:07:12

Javascript - 無法獲取'getElementsByClassName'工作

回答

相關問題