javascript - YUI 通过 id 方法获取元素不适用于数字起始 id

Question

我刚从 YUI2 切换到 YUI3。因此，我没有使用 YAHOO.util.Dom.get(ID_OF_ELEMENT)，而是尝试使用 Y.one('#ID_OF_ELEMENT)'。它适用于 id img123 的 div，但不适用于 123img 或 123>.

我也尝试过使用 Y.all 但它没有用。我发现让它工作的唯一方法是使用 Y.DOM.byId(显示为 alternative in YUI forum )，同时仍然使用 YUI。

所以我所做的是用最后一个获取元素并用第一个获取节点，如下所示:

Y.one(Y.DOM.byId(ID_OF_ELEMENT)).append(SOME_HTML_CONTENT);

我不能单独使用 Y.DOM.byId，因为我需要将它的内容作为一个 Node 进行操作。

那么，有没有办法只使用 Y.one 来做到这一点？ 这是 YUI 错误吗？

我已经对此发表了评论 YUI forum entry ，因为我不知道这是否真的是我可以填写的错误 YUI bug reporting tool .

Answer 1

如果你使用 html4:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

另见 this link .

===更新===

对于 html5:

在您使用 Y.one(...) 的示例中，yui 调用浏览器的 native 查询选择器:querySelector(selector)(请参阅 here)。
但并非所有浏览器的 querySelector 函数都接受所有允许的 html5 id。例如。 firfox10 native 查询选择器对于具有起始数字的 id 失败(在不同的浏览器中尝试 this example)。
为什么？ Mozilla 使用 CSS2.1 规范选择器:
火狐 links in his querySelector documentation到选择器 API 级别 1。
在first chapter "Abstract" :

Selectors, which are widely used in CSS, are patterns that match against elements in a tree structure [SELECT][CSS21].

[SELECT]链接到 Selectors Level 3在 chapter 6.5 "ID selectors" 中:

...
An ID selector contains a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers.
...

来自链接css2.1 identifiers specification :

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

===更新===

您可以使用以下选择器 [id="123"]。例如:

YUI().use('node', function (Y) {
    Y.one('[id="123"]').on("click", function (e) {
        alert("Hello World!");
    });
});

另见 this example .