为何getElementById能找到元素但element.id返回空字符串而非指定ID？

我遇到一个奇怪的问题：我可以通过document.getElementById("test")成功获取到目标元素，并且能正常访问它的value属性（输出Hello World），但访问该元素的id属性时，却返回空字符串""，而不是预期的"test"。

示例代码如下：

console.log(document.getElementById("test").value); // 输出 Hello World
console.log(document.getElementById("test").id); // 输出 "" 而非 "test"

已找到的解答 #

经过仔细排查代码逻辑，发现是我在某个条件分支里，不小心执行了document.getElementById("test").setAttribute("id", "")，把这个元素的id属性给清空了！因为那段代码只有在特定场景下才会触发，我一开始完全没留意到这个操作，导致后续再获取元素id时返回空字符串，但value属性没有被修改过，所以依然能正常输出Hello World。

如果大家遇到类似问题，可以优先排查这几个方向：

• 是否有代码动态修改过目标元素的id属性（不管是直接赋值element.id = ""还是用setAttribute方法）
• 是否在克隆元素、模板实例化等场景中，丢失了id属性的赋值
• 是否存在全局变量名与元素id重名，导致意外覆盖的情况（比如全局声明了var test = ""，不过这种情况通常会影响元素获取，而非仅id属性异常）

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