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