Question

这可能听起来像个愚蠢的问题，我倾向于使用：

$(document).ready(function() { });

但基本问题。

假设我有一个像这样的元素列表：

<body>
  <p>Paragraph</p>
  <div>Div</div>
  <div id="HelloWorld">Hello, World</div>
  <script>
    var hw = $('#HelloWorld');
    $(document).ready(function() {
      // hw is available for me here
    });
  </script>
  <p>Another paragraph</p>
</body>

似乎div是可用的，我没有遇到错误，但是这有什么技术上的错误吗？不是说完全有组织的代码，而是对手头的技术问题感到好奇。

所以我想问题是：

一旦DOM元素被认为是完整的，并且只要浏览器读取它就可用，无论其余元素是否已加载？

Answer 1

似乎div是可用的，我不会遇到错误，但这有什么技术上的错误吗？

否即可。只要脚本在元素存在之后才运行，您就可以访问它。 script标记中的 所引用元素的标记后的脚本将始终如一地跨浏览器访问该元素。

始终有效：

<div id="foo">...</div> <script> $("#foo")... </script>

永不运作：

<script> $("#foo")... </script> <div id="foo">...</div>

仅限，因为jQuery延迟执行ready回调：

<script> $(document).ready(function() { $("#foo")... }); </script> <div id="foo">...</div>

这是the common recommendation在结束script标记之前将</body>标记放在文档末尾的原因之一。这样，他们就可以访问上面定义的所有元素。（并且他们不会延迟页面的初始呈现，这通常是，但不总是，你想要的......）

DOM元素何时“准备好”？

1 个答案: