带有 Int 的 JS document.getElementById()答案

【问题标题】：JS document.getElementById() with Int带有 Int 的 JS document.getElementById()
【发布时间】：2018-07-27 04:25:28
【问题描述】：

我通过document.getElementById({{templete_var}}) 得到一些DOM elements {{templete_var}} 可以是Int。我想知道这是否会导致跨不同浏览器/设备的任何错误。它在 Firefox (ubuntu) 和 Safari (Mac) 上运行良好，但是否存在可能导致错误的移动浏览器？

这里有一个小代码 sn-p 来说明我的意思。在代码 sn-p 中，这两种方法都有效。

// 1 and 2 would be template variables here so I can't "hardcode" them
document.getElementById(1).style.color = "blue"
document.getElementById("2").style.color = "red"

<span id="1">first text</span><br>
<span id="2">other text</span>

令人惊讶的是，我找不到有关此主题的任何内容，如果这是重复的，请链接原件。

【问题讨论】：

“我找不到关于这个话题的任何东西”w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute 换句话说，除了“至少一个字符，不能包含空格”之外没有任何限制
请记住，如果你还在css中使用id作为选择器，它不能以数字开头。因此，如果您的 css 包含这一行：#1 { color: red; } #2 { color: blue; }，它将无法正常工作。因此，从技术上讲，建议始终以字符开头元素 id。现在可能无关紧要，但是如果将来您想切换到使用 css 文件而不是内联更改颜色，则 id 不能是1。因此，尽管对于 javascript 和 DOM，元素可以以数字开头，但对于 css 则不能。这可能解释了您在使用其他浏览器时遇到的问题。
不管怎样，你不能只在ids 前加上前缀吗？喜欢whatever_{{template_var}}？
@FedericoklezCulloca 前缀的想法很好，我想我会接受这个并感谢信息材料。 @Shilly 感谢您的评论，幸运的是 css 在这里不是问题。我会记住的。

标签： javascript html django-templates cross-browser

【解决方案1】：

那么为什么不把你得到的任何 id 做成 .toString() 呢？

【讨论】：

如前所述，更多的是关于 Int 是否会导致问题。有很多解决方案可以确保功能不会失败，但更多的是关于我使用的方法是否安全......

【解决方案2】：

让我们看看，文档查询document.getElementById 的语法只接受一个字符串值作为参数。（见document.getElementById）。可能有几个用户代理（浏览器）是“智能的”并且在内部将整数 (1) 转换为 (“1”)。但是你不能也不应该依赖它。因此解决方案是强制转换为字符串。

const foo = 1;
const bar = '2';

document.getElementById(''+ foo).style.color = "blue"; 
document.getElementById('' + bar).style.color = "red";

<span id="1">first text</span><br> 
<span id="2">other text</span>

在这 2 个查询中，两个变量都将被强制为字符串，foo 将被转换为“1”，bar 将保持为“2”。

【讨论】：

这不是被问到的。他们在问数字 id 是否有问题。
@FedericoklezCulloca 基本语法只允许字符串，考虑可能的跨浏览器问题的唯一解决方案是将数字转换为字符串。
再一次，这不是被问到的。问题是是否，例如document.getElementById("1") 是有问题的，如果 getElementById 接受数字作为参数则不会。
像document.getElementById("1") 这样完全正常的文档查询怎么会有问题？他面临的问题是模板将变量作为整数传递，因此 getElementById 的行为在不同的浏览器中是不同的。因此解决方案：将其转换为字符串！。请仔细阅读问题。
虽然问题不是很清楚（我仍然对所问的确切内容持怀疑态度），但我开始认为您可能部分正确。请对您的答案进行一些微编辑，以便我可以删除反对票。