Question

我有以下代码（虚拟）：

myFunction(document.querySelector('[data-param="param1"]').textContent || document.querySelector('[data-param="param2"]').textContent);

应该做的是param1是否存在，使用那个，否则，通过利用param2来使用falsy。我知道这不是最好用的（见here），但这是我根据自己的情况想出来的。

我试图制作jsfiddle来证明这一点;然而，错误是错误的，虽然这可能只是控制台中的措辞不同，因为我使用两种不同的浏览器（不要问）。

在Fire bug 中它说：

TypeError：document.querySelector（...）为null

并在Chrome中说：

TypeError：无法读取属性＆＃39; your-property-here＆＃39;为null

我认为我已将其与document.getElementById('param1') || document.getElementById('param2')合作，但jsfiddle提供的内容似乎不适用于querySelector或getElementById。

我在docs上找不到任何相关内容，我的谷歌搜索没找到任何内容......

这是一个功能还是一个错误？是否有事件可以在falsy（或querySelector等）上利用getElementById1值？做我想做的事情的最佳方式是什么？

Answer 1

您看到错误的原因是您的第一个查询返回null，因此它没有属性数据集。试试这个：

(document.querySelector('[data-example="example1"]') || document.querySelector('[data-example="example2"]')).dataset.example

现在，如果document.querySelector('[data-example="example1"]')返回null，则会尝试document.querySelector('[data-example="example2"]')。您应该知道，如果两个查询都返回null，您仍然会收到错误。

Answer 2

javascript中没有关于您的案例的错误。这是您代码中的错误。如果提供的参数与document.querySelector()中的任何元素都不匹配，则getElementById或null会返回document。因此null.anything会抛出错误。您可以像下面那样重写代码以避免此类错误，

var res = (document.getElementById('id1') || document.getElementById('id2')).id;

此外，如果id1或id2都没有匹配任何内容，则会引发相同的错误。您也可以像下面那样处理这种情况，

var res = (document.getElementById('id1') || document.getElementById('id2') || {}).id;

现在在这种情况下，如果没有匹配，则res将是undefined。

Answer 3

您可能需要更正以下代码;

// data attribute:
var elm1 = document.querySelector('[data-example="example1"]') || document.querySelector('[data-example="example2"]');
    elm2 = document.getElementById('id1') || document.getElementById('id2');
document.getElementsByTagName('BUTTON')[0].addEventListener('click', function(e) {
  try {

    e.target.className += elm1.dataset.example;
  } catch(e) {
    document.getElementById('log').innerHTML += '<div>' + e + new Date() + '</div>';
  }
});

// id:
document.getElementsByTagName('BUTTON')[1].addEventListener('click', function(e) {
  try {
    e.target.className += elm2.id
  } catch(e) {
    document.getElementById('log').innerHTML += '<div>' + e + new Date() + '</div>';
  }
});

JS - document.querySelector（）|| document.querySelector（）给出了类型错误

3 个答案: