DOM元素何時“准備就緒”？

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>

這是普遍建議將script標記放在文檔末尾</body>標記之前的原因之一。 這樣，他們就可以訪問在其上方定義的所有元素。 （而且他們不會延遲頁面的初始顯示，這通常是 （但並非總是）您想要的...）

DOM元素何時“准備就緒”？

問題描述

1 個解決方案

解決方案1
3 已采納 2015-08-24 23:58:31

DOM元素何時“准備就緒”？

問題描述

1 個解決方案

解決方案1 3 已采納 2015-08-24 23:58:31

解決方案1
3 已采納 2015-08-24 23:58:31