什么是先读HTML或JavaScript？_Javascript_Html_Dom

什么是先读HTML或JavaScript？

javascript html dom

什么是先读HTML或JavaScript？,javascript,html,dom,Javascript,Html,Dom,从我所经历的一个问题来看，我理解它是如何工作的，但我找不到任何正式的参考资料来帮助我澄清这种行为 <head> <title>Chapter 7: Example 7</title> <script type="text/javascript"> var formWeek = document.form1; var weekDays = new Array(); weekDays = formWeek.theDay.opt

从我所经历的一个问题来看，我理解它是如何工作的，但我找不到任何正式的参考资料来帮助我澄清这种行为

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

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

所以。。。从代码上看，行为是明确的，但它仍然没有“点击”我的头脑，它是如何工作的

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

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

你能告诉我一些解释HTML-JS加载的好读物吗？

据我所知，javascript是按照HTML加载的。因此，如果您有一个元素

，然后有一个

脚本

，在该元素之后使用

，它就会工作。将它们转过来，首先加载

脚本

，然后加载

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

就您指出的错误而言，您可以使用以下方法等待浏览器完成加载页面。请注意文档下方的注释部分

加载事件在文档加载过程结束时激发。此时，文档中的所有对象都在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>


window.onload=函数（）{
var formWeek=document.form1；
var weekDays=新数组（）；
weekDays=formWeek.theDay.options；
}
函数btnRemoved_onclick（）
{
console.log（“在btnRemoved_onclick中”）；
}

当您在HTML中有一个内联

脚本

标记时，它会阻止对HTML的解析，并立即执行。在它之后写的任何东西都还没有被解析

通常的做法是将

script

标记放在

body

标记的末尾，因为此时DOM已经被解析，JS可以安全地执行。

更好地使用。当然，这只能从IE9开始使用，但同样的，

addEventListener

也是如此。整个文件、脚本标记和所有内容都是自上而下读取和解析的。这意味着引用稍后在DOM中出现的脚本标记中的元素不起作用，因为在解析脚本标记时元素不存在。解决方案是将脚本标记向下移动，或使用等待DOM整体加载的事件处理程序。如果不想使用事件侦听器，可以将脚本标记放在

的正前方。Better bind事件处理程序可能重复，如@Terwanerik所示。该代码不灵活。