使用JS中的.parentElement方法返回未定义

Question

当我尝试使用.parentElement方法获取parentElement对象时，我不知道为什么在chrome控制台中得到未定义的结果。

Answer 1

querySelector / querySelectorAll返回一个NodeList。这是一个类似Array的对象，但不是精确的数组。简单来说，您不能在NodeList上调用forEach。相反，您可以使用Array.from(YourNodeListObject)或较旧的样式-[].slice.call(YourNodeListObject)将NodeList封装为Array，从而将NodeList转换为Array。可能您已经将它与jQuery的each方法混淆了，该方法可以传递给对象之类的每个数组。

Array.from(document.querySelectorAll('.sales_product_add_button')).forEach(function(btn){
  btn.addEventListener('click', function(evt){
    alert(evt.target.parentElement.innerText);
  });
});

<div class='product' id='product-1'><p>Product-1</p><a class="sales_product_add_button">Click me</a></div>
<hr>
<div class='product' id='product-2'><p>Product-2</p><a class="sales_product_add_button">Click me</a></div>
<hr>
<div class='product' id='product-3'><p>Product-3</p><a class="sales_product_add_button">Click me</a></div>
<hr>
<div class='product' id='product-4'><p>Product-4</p><a class="sales_product_add_button">Click me</a></div>