Question

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

<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>

使用此代码，我在“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;
    }

在执行功能时，浏览器知道form1（加载所有HTML代码）。

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

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

Where should I put <script> tags in HTML markup?

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

Answer 1

据我所知，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);

这样你可以确保在DOM准备就绪时加载了javascript。

Answer 2

当你在HTML中有一个内联script标记时，它会阻止HTML的解析并立即执行。之后写的任何内容尚未解析。

将script标记放在body标记的末尾是一种常见的做法，因为此时DOM已经被解析，JS可以安全地执行。

Answer 3

就您指出的错误而言，您可以等待浏览器使用window.onload之类的内容完成加载页面。请注意文档中较低的注释部分

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子帧都已完成加载。

这意味着在代码运行时，您的HTML已经被解析并放入DOM中。然后，您的脚本标记将是：

<script type="text/javascript">
    window.onload = function() {
        var formWeek = document.form1;
        var weekDays = new Array();
        weekDays = formWeek.theDay.options;
    }
    function btnRemoveWed_onclick()
    {
        console.log("In btnRemoveWed_onclick");

    }
</script>

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

3 个答案: