Javascript-форум - getElementById выдаёт null

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - getElementById выдаёт null (https://javascript.ru/forum/events/52980-getelementbyid-vydajot-null.html)

getElementById выдаёт null

<script type="text/javascript">

            var countAddedDates = 0;
            var currentCountDates = 5;
        //    var lastBodyChild = document.getElementById("button1");
     //       document.body.appendChild(lastBodyChild);
            alert("Hello world");
            var ar1 = document.getElementsByTagName("div");
            var ar2 = document.getElementsByTagName("input");
            var ar3 = document.getElementsByTagName("button");

            alert(ar1.length);
            alert(ar2.length);
            alert(ar3.length);
            for (var i = 0;i< ar.length;i++)
             alert(ar[i]);


    function showSelect2(){
    document.getElementById("div2").hidden=false;
    if (document.getElementById("sl1").value=="ss1")
    document.getElementById("sl2").hidden = false;
    else document.getElementById("sl2").hidden = true;
    }
    function appendDates() {

        var arr = [];
    for(var i = 0;i < 16;i++){
      arr[i] = createDateElement();
    }
        var currentId1 = countAddedDates;
        var currentId2 = countAddedDates+1;

       document.body.appendChild(arr[currentId1]);
       document.body.appendChild(arr[currentId2]);
    //   document.body.insertBefore(arr[currentId2], document.body.lastChild);
     countAddedDates +=2;


    }
    function createDateElement() {

        var container = document.createElement('input');
        container.id = "date" + currentCountDates;
        container.type = 'date';
        currentCountDates++;

        return container;
    }
  
    </script>

<body bgcolor="#deb887">
<div id="div1" name="div1">
    <div>

<label><strong>Выберите вид обжалуемого документа</strong></label>
<br><br>
   <select id="sl1" name="selectnum1"  onchange="showSelect2()" autofocus="autofocus">

	<option selected disabled>------Г Р А Ж Д А Н С К О Е  &nbsp;  С У Д О П Р О И З В О Д С Т В О------ </option>
    
// и ещё куча <option>...

   </select>
   <br><br>


   <select id="sl2" name="selectnum2" hidden>

   </select>

    </div>
   <br><br>
    <div id="div2" name="div2" hidden="true">

   <label><strong>Дата 1</strong></label><br><br>
   <input id="date1" type="date"><br><br>
   <label><strong>Дата 2</strong></label>
   <br><br>
   <input id="date2" type="date">
   <br><br>
   *Срок ... с &nbsp;<label><strong>Дата 3&nbsp;</strong></label> <input id="date3" type="date"><label><strong>&nbsp;до Дата 4&nbsp;</strong></label>&nbsp;
       <input id="date4" type="date">&nbsp;&nbsp;&nbsp;<button id="button1" onclick="appendDates()">+</button>
       <br><br>
       <label><strong>*Дата возобновления течения срока исковой давности после перерыва&nbsp;</strong></label>
       <input id="date21" type="date">
       <button id="button2" onclick="calculate()" style="color: beige">Рассчитать</button>

    </div>
</div>

</body>

собственно когда срабатывает onchange у <select id="sl1" функция showSelect2 отрабатывает правильно и функция document.getElementById отрабатывает в ней верно.
А когда я в начале скрипта пишу:
var ar1 = document.getElementsByTagName("div");
var ar2 = document.getElementsByTagName("input");
var ar3 = document.getElementsByTagName("button");

alert(ar1.length);
alert(ar2.length);
alert(ar3.length);
функции document.getElementsByTagName, document.getElementById, document.getElementByName почему то не видят элементов моей страницы. Изучаю JS всего 6 дней, поэтому однозначно я тут чего то простого не понимаю.
Помогите пожалуйста!

EmperioAf,
у вас нет переменной ar и ещё нет на странице никаких элементов чтоб искать их -- сам скрипт в конец страницы

Цитата:

Сообщение от рони (Сообщение 351571)

EmperioAf,
у вас нет переменной ar

это я просто забыл переименовать. Эти 6 строчек
var ar1 = document.getElementsByTagName("div");
var ar2 = document.getElementsByTagName("input");
var ar3 = document.getElementsByTagName("button");
alert(ar1.length);
alert(ar2.length);
alert(ar3.length);

выдают нули. Чтобы добавить свои элементы типа <input type="date"> в любое место на странице мне нужен доступ к любому элементу, который стандартно получается с помощью: document.getElementsByTagName,
document.getElementById,
document.getElementByName
но, когда я ставлю эти функции в начало скрипта, они почему то выдают null и ни один из моих html элементов не находят.

<script>
alert( document.getElementById("test") );
</script>
<input id="test">
<script>
alert( document.getElementById("test") );
</script>

Цитата:

Сообщение от Sweet (Сообщение 351573)

<script>
alert( document.getElementById("test") );
</script>
<input id="test">
<script>
alert( document.getElementById("test") );
</script>

ваш код выдаёт в моём браузере сначала null потом [object HTMLInputElement]
Может быть у меня что то не подключено?

То есть скрипт всегда должен быть после HTML-тегов и только тогда он работает корректно?
Спасибо.

EmperioAf,
или в window.onload

EmperioAf, это потому что к моменту срабатывания скрипта элемента на странице ещё. Либо в конец страницы ставь скрипты, либо оборачивай в события: load или DOMContentLoaded.