浏览器控制台在按 ID 获取元素时显示 null，但代码执行正确？答案

【问题标题】：Browser console showing null when fetching element by ID, but code executes properly?浏览器控制台在按 ID 获取元素时显示 null，但代码执行正确？
【发布时间】：2019-09-16 20:27:43
【问题描述】：

我正在尝试更改我使用 JS 的表单的 id。它工作正常并在我检查 HTML 时更改了id，但浏览器控制台输出错误，表明我试图通过 id 获取的元素是null。为什么控制台会这样？是不是因为我不断地通过 JS 获取和更改id？

document.getElementById("myForm").id = "myFormAmended"

我应该为表单分配另一个属性来获取它吗？谢谢

编辑：当myFormAmended 被隐藏时，我有另一个函数等待将其更改回myForm。在表单被隐藏一次并且id 再次成为myForm 之后，我尝试再次对myFormAmended 执行更改，它成功但错误

【问题讨论】：

您何时在控制台上看到错误？正如发布的那样，您的问题很难理解，因为几乎没有任何代码。
我有一个执行 GET 请求的函数，但在它开始执行此操作之前，我在该函数中有一行代码，如我的问题中所写。一旦它到达该行，它就会输出错误，但是当我通过 Firefox 中的 Inspector 观察 HTML 时，该行成功执行并更改了所需的 id
更改元素的 id 听起来很奇怪。您确定不想使用类吗？还是数据属性？
我使用一个 <form> 来执行两个不同的 PUT 请求。我让 jquery 监听来自 myForm id 的提交，现在我需要实现另一个 jquery 函数，它将监听来自 myFormAmended id 的另一个提交。因此，我需要更改 ID 以实现我的总体目标

标签： javascript html ajax dom

【解决方案1】：

执行此语句后：

document.getElementById("myForm").id = "myFormAmended"

您的表单现在的 id 为 'myFormAmended' 而不是 'myForm'

所以，下次要获取相同的表单时，需要执行：

document.getElementById("myFormAmended");

如果你再次更改它，你应该再次使用最新的集合id进行查询

【讨论】：

这是有道理的，但是当我的表单被隐藏时，我确实有另一个函数可以将其更改回原始id。所以我猜我的线路确实以某种方式查询了最新的id。我有一个 if 语句来检查 document.getElementById("myFormAmended") !=null 是否将其更改回 myForm
如果您出于某种目的需要更改您的 id，请先将 id 值存储到变量中，然后更改 id，完成您的任务，然后再次将 id 设置为存储的变量。