Javascript Django-document.querySelector仅查找base.html标记

我有一个django应用程序，它采用传统的base.html方法，可以在其他模板中扩展。但是，我在获取base.html模板之外的html标记时遇到了一个问题

var myHeading = document.querySelector(".contentfont");
console.log(myHeading);

给我：

<div class="contentfont">          
<!-- JS -->
<script src="/static/js/squad_picker.js" type="text/javascript"></script>
    <h1 id="test" class="heading test"> test page </h1>
    <div class="container">
      <div class="jumbotron"> 
      </div>
    </div>
 </div>

它总是给我空的。当试图通过id或类直接访问base.html以外的任何内容时，也会发生同样的情况

我添加base.html的一部分：

 <div class="contentfont">
      {% block content %}
      {% endblock %}
  </div>

{%block content%}
{%endblock%}

以及扩展它的html：

 {% extends 'my_app/base.html' %}
{% load static %}
{% block content %}
<!-- JS -->
<script src="{% static 'js/squad_picker.js' %}" type="text/javascript"></script>
    <h1 id='test' class="heading test">test page </h1>
    <div class="container">
      <div class="jumbotron">
      </div>
    </div>
{% endblock %}

{%extensed'my_app/base.html%}
{%load static%}
{%block content%}
测试页
{%endblock%}

已解决：标记应位于html文件的末尾

 {% extends 'my_app/base.html' %}
{% load static %}
{% block content %}
<!-- JS -->
<script src="{% static 'js/squad_picker.js' %}" type="text/javascript"></script>
    <h1 id='test' class="heading test">test page </h1>
    <div class="container">
      <div class="jumbotron">
      </div>
    </div>
{% endblock %}