查詢選擇器返回null

這讓我瘋狂。我有一個表單元素HTML頁面如下圖所示：查詢選擇器返回null

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="formHandler.js"></script> 
    <script src="app.js"></script> 

</head> 

<body> 

    <form data-coffee-order="form"> 
    <input type="submit" /> 
    </form> 

</body>

在我app.js我嘗試訪問使用querySelector表單元素，如下圖所示：

var FORM_SELECTOR = '[data-coffee-order="form"]' 

var form = document.querySelector(FORM_SELECTOR) 
console.log(form) // this is null why?

出於某種原因，形式始終爲空。這是爲什麼？

來源

2017-04-26 john doe

您是否在後面添加了'data-coffee-order =「form」'（也許在做'jQuery'.data（）'）？ – FrankerZ

因爲JavaScript代碼在執行之前該元素實際存在。將代碼後：

<body> 

    <form data-coffee-order="form"> 
     <input type="submit" /> 
    </form> 

    <script src="app.js"></script> 

</body>

（這可能也適用於您的其他JavaScript這是沒有必要的，但哪怕只是爲了一致性，纔有意義，除非有要立即執行JavaScript代碼，之前。 DOM被加載。）

來源

2017-04-26 17:23:28 David

完全有道理！謝謝！ –

查詢選擇器返回null

回答

相關問題