未捕获的语法错误：无法在“文档”上执行“querySelector”答案

【问题标题】：Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'未捕获的语法错误：无法在“文档”上执行“querySelector”
【发布时间】：2016-09-13 05:43:42
【问题描述】：

<button id="'+item['id']+'" class="btnDeactivateKeyInChildPremiumCustomer waves-effect waves-light">ok</button>

我使用上面的代码在 jquery 每个函数中生成按钮。按钮是动态创建的，当我单击按钮时，它应该显示按钮的进度。我正在使用这个Ladda Button Loader。

btnDeactivateKeyInChildPremiumCustomerClick : function(event){
   var id = event.currentTarget.id;
   var btnProgress = Ladda.create(document.querySelector('#'+id));
   // btnProgress.start(); or btnProgress.stop();
}

然后我将按钮传递给事件处理程序，捕获上述函数的事件进程。在该函数内部，它将创建一个 btnProgress 对象。之后我可以调用 start() 或 stop() 函数。在只有一个按钮的情况下，我已经成功地工作了，而没有在每个按钮中动态创建按钮。但在每种情况下，它在执行 var btnProgress = Ladda.create(document.querySelector('#'+id));

时都会显示一些错误

错误

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#22' is not a valid selector.

【问题讨论】：

标签： javascript jquery backbone.js

【解决方案1】：

虽然这在 HTML 中有效，但您不能在 CSS 选择器中使用以整数开头的 ID。

正如所指出的，您可以改用getElementById，但您仍然可以使用querySelector 实现相同的效果：

document.querySelector("[id='22']")

【讨论】：

这甚至解决了当 id 包含保留字符如[、]（方括号）或:（冒号）的罕见情况

【解决方案2】：

您可以在 HTML5 文档中使用 IDs that start with a digit：

该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何空格字符。

对于 ID 可以采用的形式没有其他限制；特别是，ID 可以仅包含数字、以数字开头、以下划线开头、仅包含标点符号等。

但是querySelector 方法使用 CSS3 选择器来查询 DOM，而 CSS3 不支持以数字开头的 ID 选择器：

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。

为 ID 属性使用类似 b22 的值，您的代码将起作用。

既然你想通过ID选择一个元素，你也可以使用.getElementById方法：

document.getElementById('22')

【讨论】：

所以在我的情况下 var btnProgress = Ladda.create(document.getElementById('#'+id));
@boycod3 没有散列 var btnProgress = Ladda.create(document.getElementById(id));
不，您不应该将# 用于getElementById 方法。只是 ID。