javascript - 如果页面上不存在元素，为什么 JavaScript 会抛出错误？

Question

我的场景是我有一个 JS 文件被两个 HTML 页面使用。一个有一个带有 id="a" 的 button，另一个没有。通过这样做，我在 id="a" 上附加了一个事件。

document.getElementbyId("a").onclick = function () { .. }

我的问题是当我运行没有 button 和 id="a" 的第二个文件时，它会抛出错误

TypeError: document.getElementbyId(...) is null

这会导致一些意想不到的行为!有没有办法继续只使用一个 JS 文件，或者我应该为每个 html 页面分离 JS 文件？

我在 StackOverflow 上读到一个问题 here这就是为什么 jQuery 在选择器无效时不会抛出错误的原因。我需要与 vanilla JavaScript 相同或相似的功能。

Answer 1

简单的解决方法是添加一个检查:

if (document.getElementById("a") !== null) {
    document.getElementById("a").onclick = function () /* .. */ };
}

jQuery 永远不会在缺少元素时中断，它只是默默地失败。你可以争论这是否好。

jQuery 使用的技巧是它总是会返回一些东西。 $("#id") 将返回一个 jQuery 包装器。该包装器具有 .on 和 .load 以及 .html 等功能。选择器可以匹配一个、多个或不匹配元素。对于包装器，匹配多少元素并不重要。

它是这样工作的:

var elem = get_element("a");
elem.onclick(callback);

function get_element(id) {
    var elem = document.getElementById(id);
    return { // return a wrapper
        onclick: function (callback) {
            if (elem !== null) {
                elem.onclick = callback;
            } else {
                // silently fail
            }
        }
    };
}