В чем разница между следующими двумя операторами, использующими querySelectorAll ()? - PullRequest
Новая
       9

В чем разница между следующими двумя операторами, использующими querySelectorAll ()?

0 голосов
/ 30 декабря 2018

Если я использую следующую функцию javascript со значением селектора CSS "# game .screen.active" в качестве аргумента 

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

Приведенный выше оператор присваивает activeScreen переменная элемент документа с
id = "game" и class = "screen", который в настоящее время является active экраном.

У меня следующий вопрос:
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>

Ответы [ 2 ]

0 голосов
/ 30 декабря 2018

При использовании querySelectorAll вы можете указать несколько селекторов , используя запятую , внутри него.Разделение идентификаторов, имен классов, имен элементов и т. Д. С помощью пробела означает выбор потомков .

Итак, используя #game .screen.active, вы говорите дочерний элемент (элементы) target # game, имеющий экран класса и имеющий активный класс .Таким образом, вы можете нацеливаться на несколько элементов, но они не будут включать элемент #game.

Но, используя #game, .screen.active, вы нацеливаетесь на оба элемента #game и любые другиеэлемент с обоими классами screen и active.

См. Эту статью из Mozilla Developer Network о комбинаторах и селекторах

0 голосов
/ 30 декабря 2018

Это правда, что в любой момент времени будет только один активный экран?

Не обязательно.Вы можете иметь больше, и они будут выбраны с этим классом.Вы можете управлять им (но избегать повторных идентификаторов).

Если вы предоставляете более одного CSS-селектора в качестве аргумента функции querySelectorAll (), нужно ли разделять их с помощью запятой (',') как приведенное ниже утверждение?

Да

  • #game .screen.active означает: принесите мне что-нибудь с классами .screen и .active под id #game
  • #game, .screen.active означает: получите мне то, что имеет id #game и что-нибудь с классами .screen и .active (независимо отвнутри или снаружи #game)
...