查询选择器返回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?

出于某种原因，形式始终为空。这是为什么？

您是否在后面添加了'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被加载。）

完全有道理！谢谢！ –

查询选择器返回null

相关推荐