在Django项目中使用JavaScript EventListener及DOM元素获取异常问题

我刚接触Django框架，正在开发一个用到静态文件（JavaScript）的小型项目。我想通过DOM操作控制几个按钮，但始终无法访问到它们。执行下面的代码时，控制台输出的是空的HTMLCollection[]：

const deleteButton = document.getElementsByClassName('delete-button');
console.log(deleteButton);

我的Django模板代码如下：

<div class="my-2">
            {% for todo in mytodos %}
            <div class="checkbox my-2">
                <div class="checkbox-wrapper">
                    <input type="checkbox" id="cbox3" class="mr-2" value="third_checkbox">
                    <label for="cbox3"> {{ todo.todotext }} </label>
                </div>
                <div>
                    <a href= {% url 'delete' %}>
                        <button class="delete-button btn btn-outline-danger">Delete</button>
                    </a>
                </div>
            </div>
            
            {% endfor %}
            
        </div>

请问为什么控制台打印不出这些按钮？

1. JavaScript执行时机过早 #

你的JS代码在页面DOM还没完全渲染完成时就已经运行了，此时Django模板循环生成的按钮还没被添加到DOM树里，所以getElementsByClassName返回空集合。

解决办法：

• 把JS代码放到HTML文档的底部，也就是</body>标签的前面，确保DOM元素都加载完毕后再执行JS。
• 或者用DOMContentLoaded事件包裹代码，监听DOM加载完成的事件：

  document.addEventListener('DOMContentLoaded', function() {
      const deleteButtons = document.getElementsByClassName('delete-button');
      console.log(deleteButtons);
  });
  

2. 模板数据为空 #

如果视图中传递给模板的mytodos是空数组或者没有正确传递，模板里的{% for %}循环就不会生成任何按钮元素，自然找不到对应的DOM节点。

解决办法：

• 在Django视图函数中打印mytodos的内容，确认数据是否正确传递。
• 在模板中添加空数据提示，方便排查：

  {% if not mytodos %}
      <p>当前没有待办事项</p>
  {% endif %}
  

3. 类名拼写不一致 #

检查模板中按钮的类名delete-button和JS代码里的类名是否完全一致，注意大小写、空格等细节，任何拼写错误都会导致找不到元素。

内容的提问来源于stack exchange，提问作者Dennis Akagha