是否有规范规定元素的 id 应该设为全局变量?

发布于 2024-11-15 21:06:32 字数 523 浏览 3 评论 0原文

如果我在 Chrome 中有一个

那么在 javascript 中我可以做 a.stuff() (它是就像 a 是一个全局变量一样)。

然而,这不适用于 FireFox - 我需要使用 document.getElementById('a')

这里的正确行为是什么? (根据 W3 规范)

另外,我感兴趣的是,如果我有一个 id 为 a 的 div,但也有一个名为 a 的全局变量,Chrome 将如何解决歧义在我的脚本中。行为会是随机且古怪的吗?

id 由连字符(“-”)、冒号(“:”)和句点(“.”)组成的元素将如何被翻译(好吧,我知道它们可以通过 document.getElementById 访问) > 但是浏览器如何将其转换为代表它们的全局变量)

If I have a <div id='a'> in Chrome then in javascript I can do a.stuff() (it's like as if a is a global variable).

However this does not work with FireFox - I will need to use document.getElementById('a').

What is the correct behaviour here? (according to W3 specs that is)

Also I'm interested in how will Chrome resolve the ambiguity if I have a div with id a yet have a global variable called a too in my script. Is the behavior going to be random and whacky?

And how would an element with id consisting of hyphens ("-"), colons (":"), and periods (".") be translated (ok i know they can be accessed with document.getElementById but how will the browser translate it into the global variable that was representing them)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

楠木可依 2024-11-22 21:06:32

这取决于您阅读的规范。 :)

HTML4 规范没有描述此行为(参见 http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-idhttp://www.w3.org/TR /1999/REC-html401-19991224/types.html#type-name)。然而,它是由 Internet Explorer 引入的,然后为了兼容而复制到其他主要浏览器中。 FireFox 也会显示此行为,但仅限于怪异模式(并且即使如此,它的实现似乎也有问题)。

WHATWG HTML 规范当前要求此行为(请求删除的 bug 报告已关闭不会修复)。

无论规范是否符合规范,对应用程序代码使用全局命名空间(即window)通常被认为是不良行为。考虑使用 document.getElementById() 或 jQuery 便捷方法(例如 $("#a"))引用元素 ID,并使用函数范围变量以避免引入新变量进入全局命名空间。

WHATWG 邮件列表上有对此行为的详细讨论

It depends on which spec you read. :)

This behavior is not described by the HTML4 specification (c.f., http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id and http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name). However, it was introduced by Internet Explorer and then copied in other major browsers for compatibility. FireFox also displays this behavior, but only in quirks mode (and even then its implementation seems buggy).

The WHATWG HTML spec currently requires this behavior (a bug report requesting it be removed was closed WONTFIX).

Regardless of spec compliance, using the global namespace (i.e., window) for application code is generally considered bad behavior. Consider referencing element IDs using document.getElementById() or jQuery convenience methods (e.g., $("#a")) and using function-scoped variables to avoid introducing new variables into the global namespace.

There is a longer discussion of this behavior on the WHATWG mailing list.

英雄似剑 2024-11-22 21:06:32

从很早开始,IE 就创建了通过名称或 id 属性值引用元素的全局变量。这从来都不是一个好主意,但被其他浏览器复制,以便与为 IE 创建的网站兼容。

这是一个坏主意,不应被复制或使用。

编辑

回答您的额外问题:

...Chrome 将如何解决该问题
如果我有一个 id 为 a 的 div,则会出现歧义
还有一个名为 a 的全局变量
也在我的脚本中。

在 IE(引入了此行为)中,如果声明的全局变量与元素 id 或名称同名,则它将优先。然而,未声明的全局变量并不是这样工作的。在 Chrome 中测试这一点不需要太多(我已经测试过了,但我不会给你答案)。

带有 id 的元素如何
由连字符 (“-”)、冒号组成
(“:”)和句点(“。”)被翻译
(好吧,我知道可以通过以下方式访问它们
document.getElementById 但如何
浏览器将其翻译为
代表的全局变量
他们)

与任何不是有效标识符的对象属性名称完全相同 - 方括号表示法(即 window['name-or-id'])。

Since very early days, IE has created global variables that reference elements by their name or id attribute value. This was never a good idea, but was copied by other browsers in order to be compatible with sites created for IE.

It is a bad idea and should not be copied or used.

Edit

To answer your extra questions:

...how will Chrome resolve the
ambiguity if i have a div with id a
yet have a global variable called a
too in my script.

In IE (which introduced this behaviour) if a global variable is declared with the same name as an element id or name, it will take precedence. However, undeclared globals don't work that way. It shoudn't take much to test that in Chrome (I have but I'm not going to give you the answer).

And how would an element with id
consisting of hyphens ("-"), colons
(":"), and periods (".") be translated
(ok i know they can be accessed with
document.getElementById but how will
the browser translate it into the
global variable that was representing
them)

Exactly the same as any object property name that is not a valid identifier - square bracket notation (i.e. window['name-or-id']).

何止钟意 2024-11-22 21:06:32

从技术上讲,这个问题是意见,但这是一个好问题。

IE 执行此操作好吧,这让一些人感到头疼。

命名规则JavaScript 中的变量HTML 中的 ID 不同。我不明白这是一件好事。

例如,在此页面上有一个 ID 为“notify-container”的元素。这根本不是一个有效的 JavaScript 名称。

另外,这些名字什么时候绑定?如果内联脚本声明了一个变量,然后该元素稍后出现,则哪个优先?

它无法保持一致。

Technically, this question is opinion, but it's a good question.

IE does this as well and it has caused headaches for some.

The rules for naming variables in JavaScript and IDs in HTML are different. I can't see how this is a good thing.

For instance, on this page there is an element with an ID of "notify-container". That's not a valid JavaScript name at all.

Also, when are these names bound? If an inline script declares a variable and then the element appears later, which has precedence?

It's cannot be made consistent.

冷月断魂刀 2024-11-22 21:06:32

以这种方式使用元素的最糟糕的事情是,如果引入在全局范围内具有相同名称的新 API,它们可能随时中断。

例如,如果您在添加 Performance API 之前有此代码

<p id="performance"></p>
<script>
    performance.innerHTML = "You're doing great"
</script>

,那么该代码现在在最近的浏览器中将停止工作,这些浏览器将 Performance API 实现为添加了全局 performance 对象。

The worst thing about using elements this way is that they could break at any time if a new API is introduced that has the same name in the global scope.

For example, if you had this prior to the addition of the Performance API

<p id="performance"></p>
<script>
    performance.innerHTML = "You're doing great"
</script>

Then that piece of code would've stopped working now in recent browsers that implemented the Performance API as a global performance object was added.

失与倦" 2024-11-22 21:06:32

我认为到目前为止大多数浏览器都支持 document.getElementById.. 使用这个更好更安全..

I think document.getElementById is supported by most browsers so far.. Its better and safe using this one..

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文