如何在<head>

中訪問getElementsByClassName中的元素我碰到一個我們已經構建的js插件（https://github.com/geibi/pictureserve）中的問題 - 將加載DOM，其img元素和getElementsByClassName函數關聯起來。一個簡單的例子：如何在<head>

內我們稱之爲document.getElementsByClassName與類.pserve：

<!DOCTYPE html> 
<html lang="en-us" dir="ltr"> 
    <head> 
      <script> 
      elements = document.getElementsByClassName("pserve"); 
      console.log(elements); 
     </script>

的HTML體內部，我們有在本例四個IMG元素：

<img class="pserve" /> 
<img class="pserve" /> 
<img class="pserve" /> 
<img class="pserve" />

的控制檯返回以下內容：

[item: function] 
    0: img.pserve 
    1: img.pserve 
    2: img.pserve 
    3: img.pserve

但是，如果您嘗試獲取len元素數組的GTH你得到零結果：

<head> 
     <script> 
      elements = document.getElementsByClassName("pserve"); 
      console.log(elements.length); 
     </script> 



==> returning value for the console.log is 0 ==> wrong

如果將控制檯呼叫</body>然後你就在接近正確的返回值4

 <script> 
      elements = document.getElementsByClassName("pserve"); 
      console.log(elements.length); 
     </script> 
</body> 



==> returning value for the console.log is 4 ==> right

所以問題是：

是否有可能，如果是的話如何訪問通過getElementsByClassName內的「元素」，或者是否有另一個必要的js功能或更好的適合。
帶有四個條目的[item：function]的返回輸出看起來很奇怪。有沒有其他方法可以訪問這些元素？例如通過函數調用還是回調？

Cheers r。

來源

2013-12-10 rpk

你必須有這樣一個DOM就緒狀態 - 因此處理程序添加到窗口的Load事件。 –

有了jQuery，你可以使用文檔就緒功能 – user2718671

有一件事讓我困惑。你如何編寫儘可能多的JavaScript到目前爲止在該插件中，但是你不知道在DOM中工作的一些基本方面？ –

JavaScript在解析HTML時遇到瀏覽器評估。在<head>中，文檔的主體尚未被看到。

將腳本放在最後，或者將代碼放入「加載」或「準備就緒」事件處理程序中。

來源

2013-12-10 15:39:58 Pointy

打敗我吧。 +1！這有所有相關信息。 – jwueller

hmmmm鏈接插件是一個香草響應的圖像解決方案。如果我們將腳本放在最後，則會出現如下問題：如果需要使用當前的視口，則基本後備圖像會先加載 - 圖像會多次或多次加載兩次。我們詢問是否有另一種解決方案的原因是，在加載主體之前已經有一些已知的東西，因爲已經識別了4個對象，但是我沒有描述getElementsByClassName可訪問的對象。 – rpk

@rpk--這非常簡單：在''中運行的JavaScript無需等待文檔的其餘部分被解析**不能**訪問文檔的其餘部分。 DOM在這個時候根本就沒有建立起來。 – Pointy

使用window.load事件。當你第一次調用腳本時，瀏覽器不知道這些元素。

來源

2013-12-10 15:42:12 BaBL86

瀏覽器已經知道如上所示，否則它不會顯示：[item：function] 0：img.pserve 1：img.pserve 2：img.pserve 3：img.pserve它似乎只是不可能使用getElementsByClassName正確訪問它們 – rpk

在你的情況下，script在DOM裝入各個元素之前執行。

認沽腳本只是畢竟你的內容，這樣

<head>....</head> 
    <body> 

     // Content here... 


    <script> 
      elements = document.getElementsByClassName("pserve"); 
      console.log(elements.length); 
    </script> 

    </body>

來源

2013-12-10 15:42:36

回答

相關問題