js querySelectorAll不是有效的选择器，尽管它类似于docs示例 [英] js querySelectorAll not a valid selector despite it being like the docs example

问题描述

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

此处，属性选择器用于返回ID为"userlist"且具有"data-active"属性值为"1"的列表中包含的列表项的列表.

var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active=1]");

但是当我尝试

var matches = document.querySelectorAll('div[data-id=7821549]');

我得到:

DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div[data-id=7821549]' is not a valid selector.

这是我试图获取的div:

this is the div im trying to get:

<div class="cell cell--event-list cell--odds js-event js-event-odds js-event-odds-7821549 js-event-status-finished" data-id="7821549">

推荐答案

示例选择器"li [data-active = 1]" 在我的Chromium浏览器中引发了与属性选择器值类似的错误是一个数字.甚至是有效HTML5 ID的简单数字ID选择器(例如#22 )

The example selector "li[data-active=1]" throws a similar error on my Chromium browser as the attribute selector value is a number. Even simple numeric ID selectors (like #22) for valid HTML5 IDs do not work with querySelector method.

用引号将属性选择器的值引起来可解决以下问题:'div [data-id ="7821549"]'

Wrapping the attribute selector's value with quotes solves the issue: 'div[data-id="7821549"]'

这篇关于js querySelectorAll不是有效的选择器，尽管它类似于docs示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！