Question

这让我发疯了。我有一个带有表单元素的HTML页面，如下所示：

<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?

由于某种原因，表格始终为空。这是为什么？

Answer 1

因为JavaScript代码在之前执行元素实际存在。将代码放在：

之后
<body> <form data-coffee-order="form"> <input type="submit" /> </form> <script src="app.js"></script> </body>

（这也可能适用于您的其他JavaScript。它没有必要，但即使只是为了保持一致也是有意义的。除非您希望在DOM之前立即执行JavaScript代码装了。）

查询选择器返回null

1 个答案: