Question

我只是问自己，这两个代码之间的最佳方法是获取所有元素而不会得到JS异常。

＃1

var items = document.querySelectorAll('.items');
if (!!items) {
  items.forEach(function(item) { 
    item.addEventListener('click', function() { ... })
  }
}

＃2

var items = Array.prototype.slice.call(document.querySelectorAll('.items'), 0);
if (items.length > 0) {
  items.forEach(function(item) { 
    item.addEventListener('click', function() { ... })
  }
}

提前感谢你的导师：）

Answer 1

如果你在它上面循环，你不需要检查数组的长度，如果没有任何元素，就不会发生任何事情。

请注意getElementsByClassName()返回一个类似于数组的对象，而不是实际的数组，但它确实有一个length属性。见MDN docs。

你可以试试;

var els = document.getElementsByClassName( 'yourClass' );

for( var i = 0; i < els.length; i++ ){
  els[i].addEventListener( 'click', function(){
    // your code
  });
}

Answer 2

您可以查看"forEach"是in items

var items = document.querySelectorAll('.items');
if (items.length && "forEach" in items) {
  items.forEach(function(item) { 
    item.addEventListener('click', function() { ... })
  })
} else {
  if (items.length && !"forEach" in items) {
    items = Array.prototype.slice.call(document.querySelectorAll('.items'), 0);
    items.forEach(function(item) { 
      item.addEventListener('click', function() { ... })
    })
  }
}

或者，使用spread元素确保我们有一个数组

var items = [...document.querySelectorAll('.items')];
if (items.length) {
  items.forEach(function(item) { 
    item.addEventListener('click', function() { ... })
  })
}

或使用for..of循环

for (let item of document.querySelectorAll('.items')) {
  item.addEventListener('click', function() { ... })
}

获取所有指定元素以在其上添加事件侦听器的最佳实践

2 个答案: