GetElementById() возвращает значение null, хотя элемент существует

Я пытаюсь получить элемент с getElementById(), но он возвращает null, хотя элемент существует. Что я делаю неправильно?

<html>
<head> 
    <title>blah</title>
    <script type="text/javascript">
        alert(document.getElementById("abc"));
    </script>
</head> 
<body>
    <div id="abc">

    </div>
</body>

Ответ 1

Вы должны поместить это в событие document load. DOM не достиг значения abc к моменту выполнения script.

Ответ 2

Ваш script запускается до загрузки DOM. Чтобы исправить это, вы можете поместить свой код в функцию window.onload следующим образом:

window.onload = function() {
    alert(document.getElementById("abc"));
};

Альтернативой является размещение вашего script до закрытия тега </body>.

Ответ 3

Если вы не хотите присоединяться к событию загрузки, просто поместите свой script в нижней части тела, чтобы он выполнялся в конце -

<html>
<head> 
    <title>blah</title>    
</head> 
<body>
    <div id="abc">
    </div>
    <script type="text/javascript">
        alert(document.getElementById("abc"));
    </script>
</body>
</html>

Ответ 4

Это происходит из-за того, что script выполняется до отображения страницы.

Для доказательства добавьте этот атрибут в тег body:

<body onload="alert(document.getElementById('abc'));" >

Ответ 5

Но он не существует, а не в тот момент в HTML. HTML-документы анализируются сверху вниз, как и программы. Лучшим решением является просто разместить тэг script в нижней части страницы. Вы также можете прикрепить свой JavaScript к событию onload.