无法对文档执行查询选择器，id 不是有效的选择器答案

【问题标题】：Failed to execute query selector on document, id is not a valid selector无法对文档执行查询选择器，id 不是有效的选择器
【发布时间】：2016-01-13 21:34:59
【问题描述】：

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

语法错误：无法在“文档”上执行“querySelector”：“#1234”不是有效的选择器。但是，我看不出这是怎么可能的，因为我在<p> 中显然有id=1234。

此外，当我评论其他所有内容并执行警报（id）时，这对第二种形式不起作用，错误是：

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

这是在 jfiddle 中的：https://jsfiddle.net/wafqgq0L/2/

document.querySelector('.editable').addEventListener('click', function(event) {
 var index = event.target.id.indexOf('_');

 var id = event.target.id.substring(0,index);
	
	//actual data
	document.querySelector('#'+id).classList.add('hidden');
  
  //edit button
  document.querySelector("#"+id+"_edit").classList.add('hidden');
  
  //textarea
	document.querySelector("#"+id+"_editable").classList.remove('hidden');
  
  //save button
	document.querySelector("#"+id+"_save").classList.remove('hidden');

});

.hidden {
  display: none;
}

//all id will be like 12345_comment

<div class="editable">
<p id="1234">
  Some comment
</p>

<form action="form.php" method="post">
  <textarea id="1234_editable" class="hidden">Some comment</textarea>
  <a href="#" id="1234_edit">Edit</a>
  <a href="#" id="1234_save" class="hidden">Save</a>
</form>
</div>
<br><br>
<div class="editable">
<p id="123">
  Some comment
</p>

<form class="editable" action="form.php" method="post">
  <textarea id="123_editable" class="hidden">Some comment</textarea>
  <a href="#" id="123_edit">Edit</a>
  <a href="#" id="123_save" class="hidden">Save</a>
</form>
</div>

【问题讨论】：

如果使用 HTML4 ids 必须以字母 (w3.org/TR/html4/types.html#type-id) 开头，而 HTML5 则可以使用数字。将您的 ids 更改为以字母开头或使用 HTML5
你不能使用 JQuery 有什么原因吗？它使这样的 DOM 操作更容易（并且语法更简洁）
不明白你为什么不使用getElementById
@SteveHarris 我知道这是一个老问题，但也许其他观众会发现有趣的是getElementById 返回类型Element，而querySelector 返回类型HTMLElement。有时只有其中一个适用于某些情况。请查找更多详细信息here、here 和 here

标签： javascript html css

【解决方案1】：

如果使用 HTML4 ids 必须以字母开头 (https://www.w3.org/TR/html4/types.html#type-id)

如果使用 HTML5，您可以使用数字。

要么将您的 ids 更改为以字母开头（如 id="p12345"），要么使用 HTML5 （即在文档顶部使用<!DOCTYPE html>）

【讨论】：

我改了，但还是有这个错误：Uncaught TypeError: Cannot read property 'classList' of null: jsfiddle.net/wafqgq0L/4 That didn't save changes, sec.
您的代码在单击save 按钮时没有执行任何操作 - 您可以发布这部分代码吗？
jsfiddle.net/wafqgq0L/10 更新。上面的表格现在可以工作了，但下面的表格不行。保存按钮现在不应该做任何事情。我只想让文本区域出现。控制台中也没有任何内容
当您单击链接外部（即在 div 上）时，您会收到错误“Uncaught TypeError: Cannot read property 'classList' of null”，因为“目标”没有 ID。 . 我会尝试添加更完整的解决方案
实际上，document.querySelector('#000") 确实会引发错误，无论文档的 DocType 是什么。有趣的问题...

【解决方案2】：

您可以为此使用模板字符串文字，因为 id 必须用引号引起来，否则它将不起作用，并确保在文档顶部使用 HTML5。有了这个，我就没有任何问题了。

例如：

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

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

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

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

希望这会有所帮助。

【讨论】：

第二个为我节省了很多浪费的时间。谢谢！顺便说一句“KosovoJeAlbania”

【解决方案3】：

您可能会发现 jQuery 更简单，而且它会自动跨浏览器（并且输入速度更快！）因为它已标记在您的问题上，所以这里是 jQuery 解决方案：

编辑：用户 `John` 于 2019 年 5 月 25 日 21:10（问题被提出和回答后 3 年）从原始问题中删除了标签 `jQuery`，并带有莫名其妙的编辑评论“删除垃圾邮件”标签”。

jsFiddle Demo

$('[id^=edit_]').click(function(){
    var id = this.id.split('_')[1];
    $('#'+id).addClass('hidden');
    $('#edit_'+id).addClass('hidden');

    $('#save_'+id).removeClass('hidden');  
    $('#editable_'+id).removeClass('hidden');  
});

$('[id^=save_]').click(function(){
    var id = this.id.split('_')[1];
    $('#'+id).removeClass('hidden');
    $('#edit_'+id).removeClass('hidden');

    $('#save_'+id).addClass('hidden');  
    $('#editable_'+id).addClass('hidden');  
});

请注意，我切换了 id_number 和 idName_ 前缀。这使得使用starts with 选择器定位这些元素变得更加容易：id^=

【讨论】：

这很棒。谢谢。不知道点击保存后是否可以发帖请求？
您正在寻找的称为 AJAX - 不要被吓倒，它比听起来容易得多。请参阅 this post 和 this answer 进行快速介绍，并且一如既往地在 StackOverflow 上，请为您认为有帮助的任何帖子投票。
这确实提供了一种解决方法，但没有解释为什么document.querySelector('#000') 会引发错误，而document.querySelector('[id="000"]') 会像document.getElementById('000') 那样检索元素...

【解决方案4】：

document.querySelector("class or id") 不使用标签作为参数，而是使用类或 ID。

【讨论】：

编辑：用户 John 于 2019 年 5 月 25 日 21:10（问题被提出和回答后 3 年）从原始问题中删除了标签 jQuery，并带有莫名其妙的编辑评论“删除垃圾邮件”标签”。

编辑：用户 `John` 于 2019 年 5 月 25 日 21:10（问题被提出和回答后 3 年）从原始问题中删除了标签 `jQuery`，并带有莫名其妙的编辑评论“删除垃圾邮件”标签”。