在javascript dom中，属性名称有规则吗？答案

【问题标题】：in javascript dom, are there rules to attribute names?在javascript dom中，属性名称有规则吗？
【发布时间】：2011-10-19 08:37:26
【问题描述】：

对于页面上的元数据，使用属性名称，如table:rowNum:<name>，例如，

var row = document.createElement('tr'); row.setAttribute('tup','emp:1'); row.setAttribute('emp:1:pkid','123');

多年来一直使用冒号分隔的名称（例如，name='emp:1:emp_id'）并取得了不错的成功，但今天有点使用冒号分隔的属性名称

特别是：

var el2 = row.parentNode.querySelector("[emp:1:pkid]"); => `错误：SYNTAX_ERR：DOM 异常 12`

在 dom 属性名称中，像 ':' 这样的特殊字符是非法的吗？可以转义特殊字符以使用querySelector()吗？

从铬控制台： > row.parentNode.querySelector('[emp:1:pkid]'); 错误：SYNTAX_ERR：DOM 异常 12

根据詹姆斯（下）：

> row.parentNode.querySelector('[emp\\:1\\:pkid]'); 123

但问题 - 不适用于 getAttribute - pia

> row.getAttribute('emp:1:pkid'); 123 > row.getAttribute('emp\\:1\\:pkid'); 空值

【问题讨论】：

很有趣，我还不确定（查找）。同时，对于未来的项目，考虑使用 jQuery 的data()。它允许您设置任意数据并将其与您的 dom 元素相关联（都来自服务器，因此您的 js 可以使用它，并且只能在客户端使用。api.jquery.com/jQuery.data
DOM 属性是 DOMString 类型，它是一个 UTF-16 编码序列。据我所知，您使用的字符应该没问题。我不是 100% 确定这一点，因此评论而不是回答。
@cc young - querySelector('[emp\\:1]') 将返回 null，因为它与元素不匹配（基于您最初发布的示例）。你的意思是[emp\\:1\\:update]？
@James - 抱歉这个草率的例子。我关注的是DOM Execption 12。将修复示例以保持一致

【解决方案1】：

看来你可以用双反斜杠转义特殊字符：

var el2 = element.querySelector("[emp\\:1\\:update]");

我认为问题在于冒号通常表示伪元素。

根据WHATWG spec，除会更改上下文的字符外的任何字符（例如，等号字符，因为它指定值的开始，或大于字符，它将指定标记的结束） .在此基础上，可以在属性名称中使用冒号字符。

更新（基于 cmets 的答案和问题的更新）

要同时使用querySelector 和getAttribute 的一个变量，您可以这样做，或者您可以只存储带有转义字符的版本，而没有（这绝对是我的首选）：

var s = "emp\\:1\\:update";
console.log(row.getAttribute(s.replace(/\\/g, "")));

【讨论】：

很好的洞察力，但问题：与querySelector() 一起工作正常，但与getAttribute() 一起工作失败 - 请参阅问题区域示例
去掉方括号。 getAttribute 将传递给它的整个字符串作为属性的名称。
方括号：示例文本上的剪切和粘贴问题。问题依然存在。
使用getAttribute时为什么不直接转义它们？
要清楚，您的解决方案有效。问题是程序需要维护属性名称的两份副本，一份用于getAttribute，另一份用于querySelector - 似乎这是一个可能必须与之共存的pia