querySelector結果がnullとなる

[].forEach.callの挙動について学習中ですが、
以下のコードで
document.querySelector('.select')の結果がnullとなりますが、何か誤りがありますでしょうか。
window.document,document.bodyなどでも失敗しました。

<html>
    <head>
        <script>
          var select = document.querySelector('.select');
          //var select = window.document.querySelector('.select');
          //var select = document.body.querySelector('.select');
          console.log('select',select);
          var inner = select.querySelectorAll('.outer .inner');
          console.log('inner',inner);
          console.log(inner.length); // 1 です。0 ではありません!    
          
        </script>
    </head>
    <body>
        <div class="outer">
            <div class="select">
                <div class="inner">
                </div>
            </div>
        </div>
                  
    </body>
</html>

何かヒントとなることありましたら教えていただけますでしょうか

行動規範の内容に同意します

回答2件

scriptの実行位置です。
現在の位置だとhtmlが読み込まれる前に実行しているので何も参照できるものがありません。

</body>の前に移動すると良いです。

投稿2019/08/07 09:43

m.ts10806

総合スコア80850

Kimsehwa

2019/08/08 01:31

</body>前にscriptおいても正常に動きました。ありがとうございます。

m.ts10806

2019/08/08 01:39

むしろ一般的にはscriptは</body>の前に置きます。 https://teratail.com/questions/14600

行動規範の内容に同意します

ベストアンサー

Domが形成されるのをまって処理します

javascript
1<html>
2<head>
3<script>
4window.addEventListener('DOMContentLoaded', function(e){
5  var select = document.querySelector('.select');
6  console.log('select',select);
7  var inner = select.querySelectorAll('.outer .inner');
8  console.log('inner',inner);
9  console.log(inner.length);
10});
11</script>
12</head>
13<body>
14<div class="outer">
15  <div class="select">
16    <div class="inner">
17    </div>
18  </div>
19</div>
20</body>
21</html>