Javascript 未能对文档执行查询选择器，id不是有效的选择器

我正在尝试创建一种方法来编辑一堆评论，并通过我可以生成的id来识别它们。我犯的错误是：

语法错误：未能对“文档”执行“querySelector”：“#1234”不是有效的选择器。然而，我不明白这是怎么可能的，因为我在

中清楚地看到了

id=1234

此外，还有一些问题，当我注释所有其他内容并执行警报（id）时，这对第二种形式不起作用，错误是：

TypeError:无法读取null的属性“classList”

这是用jfiddle制作的：

document.querySelector（'.editable'）.addEventListener（'click'，函数（事件）{
var索引=event.target.id.indexOf（“”“）；
var id=event.target.id.substring（0，索引）；
//实际数据
document.querySelector（'#'+id）.classList.add（'hidden'）；
//编辑按钮
document.querySelector（“#”+id+“_edit”）.classList.add（'hidden'）；
//文本区
document.querySelector（“#”+id+“_可编辑”）.classList.remove（'hidden'）；
//保存按钮
document.querySelector（“#”+id+“_save”）.classList.remove（'hidden'）；
});
。隐藏{
显示：无；
}
//所有id都将类似于12345\u注释

一些评论

一些评论




一些评论

一些评论
如果使用HTML4
id
s必须以字母（）

如果使用HTML5，你可以使用数字

将您的
id
s更改为以字母开头（如
id=“p12345”
）或使用HTML5
（即，在文档顶部使用
）
您可能会发现jQuery更简单，而且它可以自动跨浏览器（而且输入速度更快！），因为它在您的问题上进行了标记，以下是jQuery解决方案：

编辑：用户
John
于19年5月25日21:10（问题被提出和回答后的3年）从原始问题中删除了标签
jQuery
，并添加了令人费解的编辑注释“删除垃圾邮件标签”。


注意，我切换了id_编号和id name_u前缀。这使得使用
以
选择器开始：
id^=
document.querySelector（“类或id”）以这些元素为目标变得更加容易
没有使用标记作为参数，而是使用类或Id。
您可以使用模板字符串文字，因为Id必须在引号中，否则它将不起作用，请确保在文档顶部使用HTML5。这样我就没有任何问题了

例如：

document.querySelector(`[data-id="${id}" ]`);

或者，如果出于任何原因您不想使用模板文字，请添加以下代码行：

document.querySelector("[data-id=" + "\'" + id + "\'" + "]");

在双引号中使用转义字符
\'

希望这有帮助。
如果使用HTML4
id
s必须以字母（）开头，HTML5可以使用数字。要么将您的
id
s更改为以字母开头，要么使用HTML5有什么原因不能使用JQuery吗？这使得像这样的DOM操作更容易（语法更简洁）我不明白为什么不使用getElementById@SteveHarris我知道这是一个老问题，但其他观众可能会发现有趣的是，
getElementById
返回类型
元素
，而
querySelector
返回类型
HTMLElement
。有时，在某些情况下，其中只有一个是适用的。请查找更多详细信息，我对其进行了更改，但仍然存在以下错误：未捕获的TypeError:无法读取null的属性“classList”：未保存更改，秒。当单击
保存
按钮时，您的代码没有做任何事-您可以发布该部分代码吗？更新。上面的表单现在可以工作了，但是底部不能。“保存”按钮现在不应执行任何操作。我只想显示文本区域。控制台中也没有任何内容当您在链接外部（即在div上）单击时，您会收到错误“Uncaught TypeError:无法读取null的属性'classList'，因为'target'没有id。。。我将尝试实际添加一个更完整的解决方案，
document.querySelector（“#000”）
无论文档的DocType是什么，都会抛出一个错误。有趣的问题……这很好。谢谢。你知道我是否可以在单击保存后发出post请求吗？你要找的是AJAX，不要害怕，它比听起来简单得多。请参阅和以获取快速介绍，并一如既往地了解StackOverflow对任何您认为有用的帖子进行投票。这确实提供了一种解决方法，但并不能解释为什么
document.querySelector（'000'）
在
document.querySelector（'id=“000”]'）
检索元素时会抛出错误，就像
document.getElementById（'000'））
does…第二个节省了我很多浪费的时间。谢谢！顺便说一句“Kosovojalbania”
document.querySelector("[data-id=" + "\'" + id + "\'" + "]");