javascript - 使用innerHTML设置数据无法用querySelector带数据

Question

const li = document.createElement('li');
li.innerHTML = `
  <i class="fa fa-square-o item btn emptyButton" aria-hidden="true"></i>
  <i class="fa fa-check-square-o item btn checkedButton dis-non" aria-hidden="true"></i>
  <span class='item' id = '${anArray.length + 1}'>${INPUTVALUE}</span>
  <i class="fa fa-trash-o btn removeButton item" aria-hidden="true"></i>
`;

我像上面一样设置 HTML 数据，然后我在获取数据时遇到了问题。我想使用 querySelector ，如下所示，使用 span 及其 id:

document.querySelector('span#2')

但我什么也得不到，所以我不得不做一些疯狂的工作，比如:

ET.arentElement.arentElement.parentElement.previousElementSibling.firstElementChild.innerText;

这不是来自示例代码，但因为这是最糟糕的，所以我想用它作为示例。

Answer 1

span#2 是无效的 CSS 选择器，ID 选择器不能以未转义的数字开头(更多信息请参见 the spec )。一般来说，您最好不要使用以数字开头的 ID 值，但如果这样做，您必须以不同的方式选择它们 - 要么不使用 CSS 选择器:

span = document.getElementById("2");

...或者通过转义它(但坦率地说，这有点难看)，或者使用属性形式:

span = document.querySelector("[id='2']");

<小时/>

另请注意Scott Marcus' answer — 如果您的代码在尝试获取元素之前没有将 li 附加到文档，您要么希望将其附加到文档，要么使用 querySelector 李:

span = li.querySelector("[id='2']");

<小时/>

在 CSS 选择器中，正如 Taplar 在评论中指出的那样，在这种特殊情况下，由于 span 有一个类，因此您可以添加该类:

span = document.querySelector("[id='2'].item");
// or
span = li.querySelector("[id='2'].item");