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

【问题标题】：If element is not present on page why is JavaScript throwing an error?如果页面上不存在元素，为什么 JavaScript 会抛出错误？
【发布时间】：2015-04-22 05:11:01
【问题描述】：

我的情况是我有一个 JS 文件，它正在两个 HTML 页面上使用。一个有button 和id="a"，另一个没有。我通过这样做在id="a" 上附加了一个事件。

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

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

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

这会导致一些意想不到的行为！有没有办法继续只使用一个 JS 文件，还是应该为每个 html 页面分开 JS 文件？

我在 StackOverflow here 上阅读了一个问题，该问题是关于如果选择器无效时 jQuery 不会抛出错误的原因。我需要与 vanilla JavaScript 相同或相似的功能。

【问题讨论】：

jQuery 会默默地忽略“未找到元素”条件，因为有时您想要这种行为，有时您不需要。就个人而言，如果我说“找到这个元素”并且“这个元素”不存在，我想要一个错误......

标签： javascript jquery html

【解决方案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
            }
        }
    };
}

【讨论】：

应该是 getElementById() - 你发现了 OP 的大写错误。
在您的修复中，您是否需要“!== null”部分？或者你可以这样做： if (document.getElementById("a")) { document.getElementById("a").onclick = function () /* .. */ }; } ?

【解决方案2】：

考虑测试存在

var elm = document.getElementById("a");
if (elm) elm.onclick = function () { .. };

或者在虚假的情况下退回

(document.getElementById("a") || {}).onclick = function () { .. };

在第二种方法中，函数仍会被设置，但会很快被 GC'd 因为对 {} 的引用在下一行消失。

【讨论】：

【解决方案3】：

以上所有解决方案都是正确的。但是，您绝对应该远离编写whatever.onclick = function，因为这不再是编写代码的最佳方式。使用这种方法，你只会得到一个点击事件。使用更现代的方法，您可以根据需要附加任意数量的事件。

另外，您提到了 jQuery，但在提供的代码中没有 jQuery，只有 vanilla JavaScript。您需要 jQuery 解决方案还是 JavaScript？

JavaScript

document.addEventListener('DOMContentLoaded', function(){
  var elm = document.getElementById('a');
  if ( elm ) { //if the element exists add the click event
    elm.addEventListener('click', function(){
      //Your "onclick" code here
    });
  }
});

jQuery

$(function(){
  $('#a').on('click', function(){
    //Your "onclick" code here
  });
});

【讨论】：