1

我是 javascript 的新手，我想知道为什么在这个脚本中document.write运行良好，而 innerHTML 没有（我在正文中给出了一个 div id 计时器）。是不是innerHTML 需要在html 的正文部分发生Onload 事件？如果是，为什么？（我在writehere()html 文档的 head 部分调用该函数。

<script language="javascript">

 function writehere()

 {
       document.write("hello");

       var Timer = document.getElementById("timer");

        Timer.innerHTML = "hello";


}

writehere();

</script>

html代码在这里......

4

3 回答 3

1

您的问题很可能是在您的代码执行时 DOM 尚未准备好。对于您的示例，您可能只需将其移至页面底部即可。

通常，您需要确保在执行需要与 DOM 交互的 javascript 之前完全加载 DOM，如果您使用 jQuery，您可以在文档就绪函数中调用代码以确保加载 DOM，例如

   $(document).ready({

    });

看看这个 SO question for vanilla javascript 等价物

'$(document).ready()' 的非 jQuery 等价物是什么？

于 2012-05-15T13:45:10.803 回答
0

这都是关于 HTML 标签元素和执行时间的。在您的示例中，脚本位于head 标签中，因此在执行脚本时，元素 div#timer 根本不存在。

然后你有2个解决方案：

如果您的 DOM 并不复杂，并且不包含img标签或任何需要从网络获取的元素，onload则不需要使用 。您可以在两种情况下使用它：

  • 您必须等待加载所有元素，例如图像、视频等，
  • 您想延迟执行低优先级脚本，例如在您的网站上加载广告的脚本。此脚本对您的网站和访问者来说并不重要，执行可能会延迟

一般来说，将script标签放在文档末尾是否被认为是一种好习惯（因此您不需要使用onload），它可以防止 Flash Of Unstyled Content (FOUC)。Javascript 会阻止您的浏览器渲染引擎。因此，如果 JavaScript 标记在内容可供用户使用之前放置（阅读：在 head 标记中），浏览器将执行它，DOM 几乎是空的，并且在此执行期间用户只会看到一个空白页面。

另外，关于jQuery.fn.ready方法，您必须注意这一点：

$(document).ready(function() {
    // my first useless function
    console.log( "first", 1 );
});

$(document).ready(function() {
    // my second useless function
    // this function will throw an (intentional) error
    console.log( "second", someUndefinedVariable );
});

$(document).ready(function() {
    // my third useless function
    // because the previous function contains an error
    // this function will never be called
    console.log( "third ", 3 );
});

因此，假设您正在使用一些插件，并且您有一些手写代码等等。如果每个插件和您的代码都在使用该jQuery.fn.ready方法，并且由于某种原因（例如在某些情况下在某些特定的浏览器版本中）一个函数抛出错误，那么这个函数之后的所有处理程序将永远不会运行...

此外，这样做会在最后延迟所有“真正的”JavaScript 执行，如果队列中有很多方法要运行，那么您可能会在几秒钟内阻塞浏览器，用户会通知它。

于 2012-05-15T13:53:03.327 回答
0

我认为您的问题是 DOM 尚未加载，因此没有 id="Timer" 的 div 元素。您应该在 onLoad 事件上调用此方法。

于 2012-05-15T13:36:43.043 回答