在javascript dom中,有属性名称的规则吗？

Question

对于页面上使用属性名称的元数据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]");
=> `Error: SYNTAX_ERR: DOM Exception 12`

是dom属性名称中的':'非法的特殊字符？可以转义特殊字符querySelector()吗？

---

来自chrome控制台:

> row.parentNode.querySelector('[emp:1:pkid]');
Error: SYNTAX_ERR: DOM Exception 12

按照詹姆斯(下图):

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

但问题 - 不适用getAttribute- pia

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

Answer 1

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

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

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

根据WHATWG 规范，除了那些会更改上下文的字符之外的任何字符（例如，等于字符，用于指定值的开头，或大于字符，用于指定标记的结尾）。在此基础上，在属性名称中使用冒号字符就可以了。

更新（基于对答案的评论和对问题的更新）

要同时使用一个变量querySelector和getAttribute，您可以执行类似的操作，或者您可以只存储带有转义字符的版本，而存储一个不带有转义字符的版本（这肯定是我的首选选项）：

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