getElementByClassName的地方不工作的getElementById沒有（支持的瀏覽器）

Question

的作品的腳本：

function getEventTarget(e) { 
    e = e || window.event; 
    return e.target || e.srcElement; 
} 
var ul = document.getElementById('commandList'); 
ul.onclick = function(event) { 
    var target = $(getEventTarget(event)).clone().children().remove().end().text(); 
    document.getElementById('inputCommand').value = target; 
}; 

var interface = '/cgi-bin/CGIProxy.fcgi?cmd='; 
var protocol = 'http://'; 
var host, command, access, commandUrl; 

$('.sendCommand').click(function() { 
    host = $('#cameraLocation').val(); 
    access = $('#cameraAccess').val(); 
    command = $('#inputCommand').val() + $('#inputParam').val(); 
    commandUrl = protocol + host + interface + command + access;     
    $('#showUrl').html(commandUrl); 
    $('#showResult').attr('src', commandUrl); 
}); 

當我改變document.getElementById到document.getElementsByClassName（有問題的元素既有ID和Class爲"commandList"）的腳本執行不工作了，我錯過了什麼？謝謝！

新腳本：

function getEventTarget(e) { 
    e = e || window.event; 
    return e.target || e.srcElement; 
    } 
var ul = document.getElementsByClassName('commandList'); 
ul.onclick = function(event) { 
    var target = $(getEventTarget(event)).clone().children().remove().end().text(); 
    document.getElementById('inputCommand').value = target; 
    }; 

var interface = '/cgi-bin/CGIProxy.fcgi?cmd='; 
var protocol = 'http://'; 
var host, command, access, commandUrl; 

$('.sendCommand').click(function() { 
    host = $('#cameraLocation').val(); 
    access = $('#cameraAccess').val(); 
    command = $('#inputCommand').val() + $('#inputParam').val(); 
    commandUrl = protocol + host + interface + command + access;     
    $('#showUrl').html(commandUrl); 
    $('#showResult').attr('src', commandUrl); 
}); 

Answer 1

getElementsByClassName()返回元件的NodeList，而getElementById()（和querySelector()）返回單個節點。

要對類似數組的NodeList進行操作，您必須遍歷NodeList中包含的每個元素並分別指定每個元素的操作;例如：

Array.prototype.forEach.call(document.getElementsByClassName('whatever'), function (elem) { 
    elem.onclick = function() { 
     // do stuff; 
    } 
}); 

或者：

Array.prototype.forEach.call(document.getElementsByClassName('whatever'), function (elem) { 
    elem.addEventListener('click', functionToCallOnClick); 
}); 

Answer 2

getElementsByClassName()返回匹配元素的的HTMLCollection，爲多個元件，可以共享一個共同的類屬性。

您必須遍歷返回的元素並對代碼進行相關修改才能進行調整。

參見：https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName