Какая разница между помещением script в голову и тело?

У меня возникла проблема.

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  alert(document.getElementsByTagName("li").length); 
  </script>
  <title>purchase list</title>
</head>
<body>
  <h1>What to buy</h1>
  <ul id="purchases">
    <li> beans</li>
    <li>Cheese</li>
  </ul>
</body>

Когда я помещаю скрипты в голову, результат показывает 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Shopping list</title>
</head>
<body>
  <h1>What to buy</h1>

  <ul id="purchases">
    <li>Cheese</li> 
    <li>Milk</li>
    <script type="text/javascript">
    alert(document.getElementsByTagName("li").length);
    </script>
  </ul>
</body>

Когда я пытался помещать скрипты в тело, результат показывает 2. почему существует такая разница? в чем основное отличие?

Ответы

Ответ 1

В чем разница между помещением script в голову и тело?

Время выполнения.

Когда я помещаю скрипты в голову, результат показывает 0 Список покупок

Элементы, которые вы пытаетесь получить, не существуют при запуске script (поскольку они появляются после script в документе).

Обратите внимание, что вы можете написать script, чтобы функция была вызвана позже (для различных значений позже, включая "когда весь документ загружен" ) с помощью обработчики событий.

Ответ 2

Это просто, JavaScript будет идти вверх, если вы не скажете ему сделать что-то еще. К моменту, когда он достигнет элементов li, код JavaScript уже завершен.

Если вы хотите сохранить его в голове, вы можете использовать функцию document.ready, и он будет загружаться только после загрузки HTML.

Ответ 3

Голова будет отображаться перед Телом. Если вы пытаетесь получить доступ к тэгам li в голове, очевидным ответом является то, что они не создаются до тех пор, пока браузер не отобразит раздел тела, и поэтому не может быть ссылкой.

Ответ 4

Когда вы вызываете:

alert(document.getElementsByTagName("li").length);

Вы хотите получить элемент, который еще не существует. потому что голова - это первое, что запускается при загрузке страницы.

он ищет элемент li, но он еще не существует, когда голова загружается.

Вы должны поместить его в тело, потому что тогда элементы списка существуют. то он работает.

Ответ 5

Потому что во время вызова этого в голове ли еще не существует (что касается DOM) - F4r-20 1 мин назад

Это правильно. Но попробуйте следующее:

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
    window.onload = function(){ alert(document.getElementsByTagName("li").length); }
  </script>
  <title>purchase list</title>
</head>

<body>
  <h1>What to buy</h1>
  <ul id="purchases">
    <li> beans</li>
    <li>Cheese</li>
  </ul>
</body>

Ответ 6

Когда скрипты включены в голову, они загружаются или запускаются до содержимого страницы. Когда вы включаете их в тело, они загружаются или запускаются после предыдущего html. Как правило, хорошая практика заключается в том, чтобы поставить скрипты как можно ближе к концу тела.

Ответ 7

Если вы поместите script в голову, код javascript будет выполнен даже до того, как будут отображены элементы управления в тегах тела. Поэтому, если вы хотите сохранить свои скрипты в главном теге, убедитесь, что они выполняются после завершения загрузки. Ниже приведен пример:

 <script type="text/javascript">
function MyFunction() {
    alert(document.getElementsByTagName("li").length);
}
window.onload = MyFunction;
</script>