“文档”上的“querySelector”不是引发的有效选择器错误，即使 div 的 id 看起来不错 [重复]答案

【问题标题】：'querySelector' on 'Document' is not a valid selector error raised even though id's of divs seem fine [duplicate]“文档”上的“querySelector”不是引发的有效选择器错误，即使 div 的 id 看起来不错 [重复]
【发布时间】：2021-05-06 03:17:38
【问题描述】：

我正在尝试通过 Javascript 添加样式。由于某种我不知道的原因，我收到一条错误消息，指出我的查询选择器不是有效的选择器，即使我的 id 看起来正确。有人可以帮我理解我的代码出了什么问题吗？

var currentRow;
var rowCol;
for(let i = 0; i < 3; i++)
{
    var x = i.toString();
    currentRow = document.querySelector("#0");
    for(let j = 0; j < 3; j++)
    {
        y = j.toString();
        rowCol = currentRow.querySelector("#" + x + y);
        if(i == 1)
        {
            rowCol.style.border = "5px 'solid black'";
            rowCol.style.border = "5px 'solid black'";
        } 
        if(j == 0 || j == 1)
        {
          rowCol.style.border = "5px 'solid black'";
        }
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./tictactoe.css">
</head>
<body>
   <script src="tictactoe.js"></script>
    <div class= "header">
    </div>

    <div class= "main">
        <div id = '0'>
            <div id = "00">x</div>
            <div id = "01">x</div>
            <div id = "02">x</div>
        </div>
        <div id = "1">
            <div id = "10">x</div>
            <div id = "11">x</div>
            <div id = "12">x</div>
        </div>
        <div class = "2">
            <div id = "20">x</div>
            <div id = "21">x</div>
            <div id = "22">x</div>
        </div>
    </div>

</body>
</html>

【问题讨论】：

您的脚本包含在head 中，并在解析HTML 文档正文之前执行，因此这些元素还不存在。将脚本移动到关闭 body 标记之前。
@CertainPerformance 您因错误原因关闭了问题。 ids 可以在 HTML5 中以数字开头（您已经发布了 HTML4 规则的链接）。这不是这里的问题。
我这样做了，但仍然遇到同样的错误
@ScottMarcus 哦，谢谢，我的错。有趣的。也许这是 querySelector 特定的限制？
@CertainPerformance 是的。请参阅下面的答案。

标签： javascript html

【解决方案1】：

您的脚本包含在head 中，并在解析HTML 文档的body 之前执行，因此这些元素还不存在。将脚本移动到结束 body 标记之前。

然后，使用.getElementById() 访问在id 中以数字作为第一个字符的元素。 .querySelector() 不适用于ids。

另外，您的 CSS 不正确。而不是：

"5px 'solid black'"

应该是：

"5px solid black"

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./tictactoe.css">
  </head>
  <body>
    <div class= "header"></div>
    <div class= "main">
      <div id = '0'>
         <div id = "00">r1c1</div>
         <div id = "01">r1c2</div>
         <div id = "02">r1c3</div>
      </div>
      <div id = "1">
         <div id = "10">r2c1</div>
         <div id = "11">r2c2</div>
         <div id = "12">r3c3</div>
      </div>
      <div class = "2">
         <div id = "20">r3c1</div>
         <div id = "21">r3c2</div>
         <div id = "22">r3c3</div>
      </div>
    </div>
        
    <!-- With the script here, all the HTML above will be parsed
         and in memory so you can access the elements. -->
    <script src="tictactoe.js"></script>
    <script>
      var currentRow;
      var rowCol;
      for(let i = 0; i < 3; i++){
          var x = i.toString();
          currentRow = document.getElementById("0");
          for(let j = 0; j < 3; j++){
              y = j.toString();
              rowCol = document.getElementById(x + y);
              if(i == 1){
                rowCol.style.border = "5px solid black";
                rowCol.style.border = "5px solid black";
              } 
              if(j == 0 || j == 1){rowCol.style.border = "5px solid black";}
          }        
      }
    </script>
    </body>
    </html>

【讨论】：