Javascript 访问DOM元素并不总是有效的-jQuery_Javascript_Jquery

Javascript 访问DOM元素并不总是有效的-jQuery

javascript jquery

Javascript 访问DOM元素并不总是有效的-jQuery,javascript,jquery,Javascript,Jquery,我试图执行访问页面中元素的代码我的HTML代码如下所示： <!DOCTYPE html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/

我试图执行访问页面中元素的代码

我的HTML代码如下所示：

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="container">
        <input type="text" id="user" /> 
        <input type="button" id="add" value="add"/>
        <ul id="peopleList">
        </ul>
        <script type="text/x-handlebars-template" id="template">
        {{#each people}}
        <li>{{.}}</li>
        {{/each}}
        </script>
     </div>
</body>

    (function(){
  var people = {
    people: ["first", "second"], 
    init: function(){
      this.cacheDOM();
      this.render();
    },
    cacheDOM: function(){
      this.$dm = $("#container"); 
      this.$userField = this.$dm.find('#user');
      this.$submitButton = this.$dm.find('#add');
      this.template = this.$dm.find("#template").html();
      this.$peopleList = this.$dm.find("#peopleList");
    },
    render: function(){
      var compiled = Handlebars.compile(this.template);
      this.$peopleList.html(compiled(this.people));
    },
  };

  people.init();
})();

在执行过程中，似乎我没有访问DOM元素的权限，因为它们是未定义的，尽管我从本教程中获取了以下代码：

在视频中，他没有使用$（document）。准备好了吗，但他仍然能够立即访问DOM元素，为什么我会有不同的行为？

因为视频中的家伙将javascript文件放在DOM的更下方，html元素之后。这样，当javascript被执行时，DOM已经被加载。

因为视频中的家伙将他的javascript文件放在DOM的更下方，在html元素之后。这样，当javascript被执行时DOM就已经被加载了。哦，这很有意义。非常感谢。添加它作为答案，这样我就可以关闭它。不客气。更好的答案是jQuery提供了一个

ready（）

方法，该方法只在加载DOM后触发，并且可以安全地进行操作。有关官方文档，请参阅。不确定这是否会使答案更好，因为该问题已包含此信息。真正的问题是视频中的人如何在没有DOM的情况下访问DOM。公平地说，答案是向上投票的。尽管我总是建议使用

ready（）

方法，这样代码排序就不会导致这些问题。