为什么随机出现一个错误说 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '' is not a valid selector答案

【问题标题】：Why is there an error that occurs randomly saying Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '' is not a valid selector为什么随机出现一个错误说 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '' is not a valid selector
【发布时间】：2021-05-10 04:02:11
【问题描述】：

我创建了一个费用跟踪器应用程序，我将用户的费用记录按日期、标题、金额和用于删除该行费用文档的“x”按钮的空列存储在表格中。当用户单击“x”按钮时，它会从 firestore 中删除文档并从行中删除其数据。

有时，当单击“x”按钮时，文档会从 firestore 中删除，但不会从表中自行删除，除非刷新页面，这基本上是在重新读取费用文档，因为文档已从 firestore 中删除。

app.js:189 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[data-id=6yl9aPRGzLn1FCbXecfI]' is not a valid selector.

/* CURRENT MONTH'S EXPENSE TABLE  */
const table = document.querySelector('#record');

function expenseRecord(user) {
  const docRef = db.collection('users').doc(user.uid).collection(`${year}-${month}`).orderBy('date', 'desc').limit(20);

  docRef.onSnapshot((snapshot) => {
    let changes = snapshot.docChanges();
    changes.forEach((change) => {
      if (change.type == 'added') {
        let tr = document.createElement('tr');
        let date = document.createElement('td');
        let title = document.createElement('td');
        let amount = document.createElement('td');
        let cross = document.createElement('td');

        tr.setAttribute('data-id', change.doc.id);
        cross.setAttribute('class', 'btnDelete');
        date.textContent = change.doc.data().date;
        title.textContent = change.doc.data().title;
        amount.textContent = `$${change.doc.data().amount}`;
        cross.textContent = 'x';

        tr.appendChild(date);
        tr.appendChild(title);
        tr.appendChild(amount);
        tr.appendChild(cross);

        table.appendChild(tr);
        cross.addEventListener('click', (e) => {
          e.stopPropagation();
          let id = e.target.parentElement.getAttribute('data-id');
          db.collection('users').doc(user.uid).collection(`${year}-${month}`).doc(id).delete();
        });
      } else if (change.type == 'removed') {
        let li = table.querySelector('[data-id=' + change.doc.id + ']');
        table.removeChild(li);
      }
    });
  });
}

<table id="record">
  <tr>
    <th>Date</th>
    <th>Title</th>
    <th>Amount</th>
    <th></th>
  </tr>
</table>

这是第 189 行

let li = table.querySelector('[data-id=' + change.doc.id + ']');

【问题讨论】：

标签： javascript firebase google-cloud-firestore css-selectors

【解决方案1】：

默认情况下，Firestore 生成的文档 ID 可以包含字母和数字。当 ID 以数字开头时，这会导致属性选择器失败，因为在属性值周围没有引号时，属性值将被视为 CSS <ident> 标记，它不能以数字开头。这就是为什么您偶尔会看到选择器失败的原因。

在属性值周围添加引号将确保解析器不会根据文档 ID 的性质区别对待它：

let li = table.querySelector('[data-id="' + change.doc.id + '"]');

【讨论】：