Javascript 对不存在的元素进行转义（如jQuery）的通常方法是什么

如果我有

var btn = document.getElementsByClassName('top_button')[0];
btn.addEventListener('click', function() { /* some here */ }));

而未定义的类，我得到了一个

TypeError

。我想知道逃避这种情况的通常方法是什么。是吗

var btn = document.getElementsByClassName('top_button')[0] || {};

或者我应该做不同的事情？jQuery是如何做到这一点的，因为当我使用

$（'.top_button'）

时，元素不在那里，它只返回一个对象

---

谢谢

如果，您可以使用简单的

：

var btn = document.getElementsByClassName('top_button');
if (btn.length > 0) {
  btn = btn[0];
  btn.addEventListener('click', function() { /* some here */ }));
}

或者您也可以检查
类型的
是否为
“未定义”
如果
，您可以使用一个简单的
：

var btn = document.getElementsByClassName('top_button');
if (btn.length > 0) {
  btn = btn[0];
  btn.addEventListener('click', function() { /* some here */ }));
}

或者您也可以检查
typeof
是否为
“未定义”
正如@PraveenKumar所回答的，您可以检查长度，但也可以检查变量是否未定义为

if (typeof btn === "undefined") {
    //do stuff here.
}

正如@PraveenKumar所回答的，您可以检查长度，但也可以检查变量是否未定义为

if (typeof btn === "undefined") {
    //do stuff here.
}

jQuery将所有结果存储在一个数组中。当您在
上调用
时，它会在该数组上循环，并将事件处理程序应用于其中的每个项。如果有零项，循环的标准将立即停止

var btn = document.getElementsByClassName('top_button');
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() { /* some here */ }));
}

var btn=document.getElementsByClassName（'top_按钮'）；
对于（变量i=0；i
jQuery将所有结果存储在一个数组中。当您在
上调用
时，它会在该数组上循环，并将事件处理程序应用于其中的每个项。如果有零项，循环的标准将立即停止

var btn = document.getElementsByClassName('top_button');
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() { /* some here */ }));
}

var btn=document.getElementsByClassName（'top_按钮'）；
对于（变量i=0；i
如果你真的只想要第一个，那么我同意Praveen的观点，即
If
是最清晰、最简单的解决方案，尽管我通常在不同的地方做：

var btn = document.getElementsByClassName('top_button')[0];
if (btn) {
  btn.addEventListener('click', function() { /* some here */ }));
}

getElementsByClassName
返回的集合可靠地跨浏览器提供
undefined
，如果您请求的索引中没有元素（就像JavaScript数组一样）

但是我会使用
querySelector
而不是
getElementsByClassName
，因为您只需要第一个，而不需要构建列表，
querySelector
在所有现代浏览器上，也在IE8上（而IE8缺少
getElementsByClassName
）

querySelector
接受任何CSS选择器（包括复杂的选择器）并返回第一个匹配元素，或
null
。它的表亲
querySelectorAll
返回一个列表（如果没有匹配项，则该列表可以为空）

如果要将事件挂接到所有匹配元素上


jQuery是如何做到这一点的，因为当我使用$（'.top_button'）时，元素不在那里，它只返回一个对象

jQuery对象是围绕DOM元素集的包装器（通常，它们可以是围绕其他事物的包装器，但在典型使用中它们是DOM元素）。因此，当您执行
$（'.top_button'）
时，您会得到一个jQuery对象，它是一个集合的包装器，其中没有任何内容。您可以对该jQuery对象进行调用，如
上的
。调用不会失败（因为jQuery对象存在），但也不会执行任何操作（因为集合中没有可供其执行任何操作的元素）

我不是建议你这么做，但是你可以自己用
querySelectorAll
做同样的事情。（jQuery比
querySelectorAll
早了几年，最初John Resig为它构建了一个完整的选择器引擎。现代浏览器在类似jQuery的东西中不需要这样做，除非你想添加自己的CSS选择器，比如jQuery的
：has
）

仅通过说明jQuery正在做什么（纯粹从概念上）：

用法：

new DomQuery(".top_button").on("click", function() {
    // do something
});

domQuery(".top_button").on("click", function() {
    // do something
});

通过使
new
可选，我们可以使jQuery更像jQuery：

function domQuery(selector) {
    // If not called via `new`, do that
    if (!(this instanceof domQuery)) {
        return new domQuery(selector);
    }

    // Get the matching elements, as an array (the `slice` thing turns
    // the collection returned by `querySelectorAll` into an array)
    this.elements = Array.prototype.slice.call(document.querySelector(selector));
}
domQuery.prototype.on = function(eventName, handler) {
    this.elements.forEach(function(element) {
        element.addEventListener(eventName, handler, false);
    });
    return this;
};

用法：

new DomQuery(".top_button").on("click", function() {
    // do something
});

domQuery(".top_button").on("click", function() {
    // do something
});

如果你真的只想要第一个，那么我同意Praveen的观点，即
If
是最清晰、最简单的解决方案，尽管我通常在不同的地方做：

var btn = document.getElementsByClassName('top_button')[0];
if (btn) {
  btn.addEventListener('click', function() { /* some here */ }));
}

getElementsByClassName
返回的集合可靠地跨浏览器提供
undefined
，如果您请求的索引中没有元素（就像JavaScript数组一样）

但是我会使用
querySelector
而不是
getElementsByClassName
，因为您只需要第一个，而不需要构建列表，
querySelector
在所有现代浏览器上，也在IE8上（而IE8缺少
getElementsByClassName
）

querySelector
接受任何CSS选择器（包括复杂的选择器）并返回第一个匹配元素，或
null
。它的表亲
querySelectorAll
返回一个列表（如果没有匹配项，则该列表可以为空）

如果要将事件挂接到所有匹配元素上


jQuery是如何做到这一点的，因为当我使用$（'.top_button'）时，元素不在那里，它只返回一个对象

jQuery对象是围绕DOM元素集的包装器（通常，它们可以是围绕其他事物的包装器，但在典型使用中它们是DOM元素）。因此，当您执行
$（'.top_button'）
时，您会得到一个jQuery对象，它是一个集合的包装器，其中没有任何内容。您可以对该jQuery对象进行调用，如
上的
。调用不会失败（因为jQuery对象存在），但也不会执行任何操作（因为集合中没有可供其执行任何操作的元素）

我不是建议你这么做，但是你可以自己用
querySelectorAll
做同样的事情。（jQuery比
querySelectorAll
早了几年，最初John Resig为它构建了一个完整的选择器引擎。现代浏览器在类似jQuery的东西中不需要这样做，除非你想添加自己的CSS选择器，比如jQuery的
：has
）

只是为了说明什么