在JavaScript中如何处理带有破折号的ID'(自动创建全局变量)

How ID's with dashes are treated in JavaScript? (automatically global variable creation)

本文关键字：全局变量 ID 创建 JavaScript 何处理 处理 破折号      更新时间：2023-09-26

当您创建HTML元素并为其添加ID时，如:

<div id="test"></div>

它将自动在Javascript中作为变量test可用，而不需要使用document.getElementById("test")。

我想知道的是当你用破折号创建ID时会发生什么，比如:

<div id="test-one"></div>

这个元素将仍然可用在Javascript中通过一些变量或变量不会被创建?我试着检查test-one和testOne的值，但它们都没有包含什么。

编辑我认为大多数人误解了这个问题。我知道用破折号创建一个变量是完全有效的。

这就是问题所在:http://jsfiddle.net/jn33bgkd/

你不需要使用document.getElementById，因为Javascript自动创建具有相同名称的id的全局变量(我知道这是一个坏的做法，使用这些，我只是想知道什么是行为)但是，如果ID有破折号，则不会创建这些全局变量。问题是，是否真的没有创建带有破折号ID的元素的全局变量，或者创建了一个不同的名称。

在JavaScript中，test-one是一个包含两个标识符test和one以及-操作符的表达式;本质上是两个不相关变量之间的算术减法。因此，直接写test-one是行不通的。

然而，该元素仍然可以使用索引器访问，即window['test-one']。

window['test-one'].innerHTML = 'Test';
<div id="test-one"></div>

注意，一个ID为"test-one"的元素永远不会反映为全局testOne，因为它会与一个ID为"testOne"的元素产生冲突。

此行为最初是非标准的，其根源在于IE遗留。它现在被记录在HTML5和HTML生活标准中，尽管前者认为它不规范。据推测，这样做是为了促进与遗留文档的跨浏览器兼容性。

相关问题:DOM树元素与id成为全局变量吗?

你所要求的是所谓的"inflection"，这是当字符串，如"test-one"被解释为"testOne"。

通常有一些语言采用这种方法(例如:Ruby);然而，这通常不是一个很好的方法，因为它需要带有规则的库来定义变化，并且变量并不总是标准化的。

记住，你总是可以快捷地使用方法:

var x = document.getElementById;
var testOne = x("test-one");

你考虑过使用文档吗?querySelector和document.querySelectorAll?

相关文章：