getElementsByClassName 在 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() 返回匹配元素的 HTMLCollection，因为多个元素可以共享一个公共类属性。

您必须遍历返回的元素并对您的代码进行相关修改以进行调整。

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

Answer 2

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);
});