en javascript dom, ¿existen reglas para los nombres de los atributos? consiguió

Question

de los metadatos en la página utilizando nombres de atributos como table:rowNum:<name>, por ejemplo,

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

han estado utilizando nombres delimitados por dos puntos (por ejemplo, name='emp:1:emp_id') durante años con buenos resultados, pero hoy en día poco con los dos puntos delimitados por los nombres de atributos

en particular:

 
var el2 = row.parentNode.querySelector("[emp:1:pkid]"); 
=> `Error: SYNTAX_ERR: DOM Exception 12` 

son de carácter especial como ':' dom ilegal en los nombres de atributos? ¿Pueden escaparse los caracteres especiales para trabajar con querySelector()?

---

desde la consola de cromo:

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

según James (abajo):

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

pero el problema - no funciona con getAttribute - pia

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

Answer 1

Parece que puedes escapar de los personajes especiales con un doble barra invertida:

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

Creo que el problema tiene que ver con el hecho de que los dos puntos normalmente indicar un elemento seudo.

De acuerdo con WHATWG spec, todos los caracteres, excepto los que cambiarían el contexto (por ejemplo, un carácter igual, que especifica el inicio del valor o un carácter mayor que el final de la etiqueta). Sobre esa base, está bien usar caracteres de dos puntos en los nombres de los atributos.

actualización (basado en observaciones sobre la respuesta y actualizaciones en cuestión)

de utilizar una variable con tanto querySelector y getAttribute, se podría hacer algo así, o simplemente podría almacenar la versión con caracteres de escape, y uno sin (que definitivamente sería mi opción preferida):

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