无法在“文档”上执行“querySelectorAll”：在 javascript 中？ [复制]答案

【问题标题】：Failed to execute 'querySelectorAll' on 'Document': in javascript? [duplicate]无法在“文档”上执行“querySelectorAll”：在 javascript 中？ [复制]
【发布时间】：2021-05-12 01:46:53
【问题描述】：

我正在尝试在 javascript 中转换以下行，但出现以下错误

错误：无法在“文档”上执行“querySelectorAll”：“.usuggest li[aria-selected!='true']” jQuery 代码

$(".usuggest li[aria-selected!='true']").eq(0).attr('aria-selected', 'true');

javascript

document.querySelectorAll(".usuggest li[aria-selected!='true']")[0].setAttribute('aria-selected', 'true')

【问题讨论】：

阅读完整的错误信息，最重要的是你在这里发布之前剪掉的部分，你会发现问题：'.usuggest li[aria-selected!='true']' is not a valid selector
How do I ask a good question?, How much research effort is expected of Stack Overflow users?
@mplungjan 选择器在与 jQuery 一起使用时并非无效，如欺骗目标或此处所述：api.jquery.com/attribute-not-equal-selector
@Andreas 哇。从来不知道（也永远不会使用它）：jsfiddle.net/mplungjan/fn54u3gw

标签： javascript jquery

【解决方案1】：

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll 的引用提到您传递的选择器必须是有效的 CSS 选择器。事实上，如果您查看代码生成的完整错误，它会给出以下信息：

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.usuggest li[aria-selected!='true']' is not a valid selector.

告诉我们选择器有问题。

移动到https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 的CSS 选择器和https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors 的属性选择器，我们看到要选择一个属性，!= 不是一个有效的运算符。从Can't find a "not equal" css attribute selector 可以看出，我们需要在前面加上:not 来应用逆运算，然后进行相等性检查。

这为我们提供了以下更新的 JavaScript

document.querySelectorAll(".usuggest li:not([aria-selected='true'])")

应该做你想做的事。

这会产生整个查询：

document.querySelectorAll(".usuggest li:not([aria-selected='true'])")[0].setAttribute('aria-selected', 'true');

由于querySelectorAll 可能不会返回结果，我建议您执行以下操作：

const falseListItems = document.querySelectorAll(".usuggest li:not([aria-selected='true'])");

if (falseListItems.length > 0) {
    falseListItems[0].setAttribute('aria-selected', 'true');
}

如果你能保证查询会导致一个结果，那么额外的 if 语句当然是没有必要的。

【讨论】：

我想将该 jquery 行转换为 javascript
@user944513 然后做一些研究并阅读答案或欺骗目标。
@user944513 我相信答案之前已经这样做并解释了您的问题，但是我已经对其进行了更新以使其更清晰

【解决方案2】：

您可以将命令拆分为 2-3 行，以便轻松调试，

const element = document.querySelectorAll(".usuggest li[aria-selected!='true']");

// 你可以在这里检查值 0f 元素：console.log(element);

element[0].setAttribute('aria-selected', 'true');

如果这也导致错误，请回复console.log(element);的输出

【讨论】：