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

如果我使用以下带有 CSS 选择器值的 JavaScript 函数"#game .screen.active"作为参数

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

上面的语句将文档元素
分配给 activeScreen 变量id="game" 和 class="screen"，当前是一个活动屏幕。

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

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

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

我的索引结构.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

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

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

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

请参阅 Mozilla 开发者网络中关于组合器和选择器的文章

这是真的吗，在任何时间点只有一个活动屏幕？

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

如果您提供多个 CSS 选择器作为 querySelectorAll（）函数的参数，我们是否必须像下面的语句一样使用 comma（'，'）分隔它们？

是的

#game .screen.active的意思是：在 id #game 下.screen和.active类给我任何东西
#game, .screen.active的意思是：给我什么有 ID #game 以及类 .screen 和 .active 的任何内容（无论内部或外部#game

我的索引结构.html

相关内容

最新更新

热门标签：