什么是首先阅读的HTML或JavaScript？

Question

什么是首先阅读的HTML或JavaScript？

从我遇到的问题我理解它是如何工作的,但我找不到任何有助于我澄清行为的正式参考.

<head>
<title>Chapter 7: Example 7</title>
<script type="text/javascript">

    var formWeek = document.form1;
    var weekDays = new Array();
    weekDays = formWeek.theDay.options;
    function btnRemoveWed_onclick()
    {
        console.log("In btnRemoveWed_onclick");

    }
</script>
</head>

<body>
<form action="" name="form1">
    <select name="theDay" size="5">
        <option value="0" selected="selected"></option>

Run Code Online (Sandbox Code Playgroud)

使用此代码,我在"weekDays = formWeek.theDay.options;"行中收到错误因为"theDay"没有定义.所以我相信在执行JS代码时,浏览器没有解析并加载DOM(因此它不知道form1).

如果我在函数内移动变量定义,一切正常.

        function btnRemoveWed_onclick()
    {
        console.log("In btnRemoveWed_onclick");
        var formWeek = document.form1;
        var weekDays = new Array();
        weekDays = formWeek.theDay.options;
    }

Run Code Online (Sandbox Code Playgroud)

在函数执行时,浏览器知道form1(加载所有HTML代码).

所以...从代码中行为是清楚的,但它仍然没有"点击"我的想法它是如何工作的.

我认为下面的链接是了解行为的一个很好的参考.

我应该在哪里将<script>标记放在HTML标记中？

你能指点一些解释HTML-JS加载的好读物吗？

Answer 1

Eri*_*wan 5

据我所知,javascript与HTML一致.所以,如果你有一个元素<foo>然后在之后script使用<foo>它,它就可以了.把它们转过来,然后script首先加载foo元素.这样您的脚本就找不到该元素.

将您的javascript更改为:

function init()
{
  var formWeek = document.form1;
  var weekDays = new Array();
  weekDays = formWeek.theDay.options;

  function btnRemoveWed_onclick()
  {
    console.log("In btnRemoveWed_onclick");
  }
}

document.addEventListener('DOMContentLoaded', init, false);

Run Code Online (Sandbox Code Playgroud)

通过这种方式,您可以确保在DOM准备好时加载javascript.

归档时间：	10 年，3 月前
查看次数：	225 次
最近记录：	10 年，3 月前