如果我使用以下带有 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];
上面两种说法有什么区别，一种带逗号，一种不带逗号
逗号？
我的 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>
最佳答案
当使用querySelectorAll 时，您可以通过在其中使用逗号, 来指定多个选择器。用空格分隔ids、类名、元素名等是后代选择。
因此，通过使用 #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
关于javascript - 以下两个使用 querySelectorAll() 的语句有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53974060/