以下两个使用 querySelectorAll() 的语句有什么区别？答案

【问题标题】：What is the difference between the following two statements using the querySelectorAll()?以下两个使用 querySelectorAll() 的语句有什么区别？
【发布时间】：2018-12-29 23:13:15
【问题描述】：

如果我使用以下 javascript 函数，CSS 选择器值为 “#game .screen.active” 作为参数

var activeScreen = document.querySelectorAll("#game  .screen.active")[0];

上面的语句将把带有
的文档元素赋给activeScreen变量 id="game" 和 class="screen" 目前是一个活动屏幕。

我有以下问题：
1. 在任何时候都只会有一个活动屏幕，这是真的吗？
2. 如果您提供多个 CSS 选择器作为 querySelectorAll() 函数的参数，
我们是否必须像下面的语句那样使用 comma(',') 将它们分开？

var activeScreen = document.querySelectorAll("#game,  .screen.active")[0];

以上两个语句有什么区别，一个带逗号，一个不带
逗号？

我的 index.html 的结构

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Game</title>

    <link rel="stylesheet" href="styles/main.css" />
    <script src="scripts/gameEngine.js"></script>
</head>
<body>
    <div id="game">
        <div class="screen" id="splash-screen">
            <h1 class="logo">Ninja <br/>Warrior</h1>
            <span class="continue">Click to continue</span>
        </div>
        <div class="screen" id="main-menu"></div>
        <div class="screen" id="game-screen"></div>
        <div class="screen" id="high-scores"></div>    
    </div>
</body>
</html>

html javascript

【问题讨论】：

这些是 css 选择器：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

标签： html javascript javascript html game-development

【解决方案1】：

使用querySelectorAll 时，您可以在其中使用逗号, 指定多个选择器。用空格分隔 id、类名、元素名等是 后代选择。

因此，通过使用#game .screen.active，您是在说目标#game 的具有类屏幕并激活类的子元素。因此，您可以定位多个元素，但它们不会包含 #game 元素。

但是，通过使用#game, .screen.active，您的目标是both #game 元素和任何同时具有screen 和active 类的元素。

Refer to this article from the Mozilla Developer Network about combinators and selectors

【讨论】：

谢谢@Marcus Parsons ?

【解决方案2】：

这是真的吗，在任何时候都只会有一个活动屏幕？

不一定。你可以有更多，他们会被那个班级选中。您可以控制它（但要避免重复的 id）。

如果你提供了多个 CSS 选择器作为 querySelectorAll() 函数的参数，我们是否必须像下面的语句那样使用逗号(',') 来分隔它们？

Yes

#game .screen.active 意思是：用.screen 和.active under id #game 给我任何东西
#game, .screen.active 的意思是：告诉我 ID 为 #game 和的任何东西 .screen 和 .active （无论在内部还是外部 #game）

【讨论】：

感谢@Luis Soares，当有人在PC、手机上玩游戏时，是不是随时都会加载1个屏幕，我想不出会有这样的场景是否已加载超过 1 个屏幕？
在您的应用程序逻辑中，您是对的。我是普通人。