Si tengo un atributo que distingue entre mayúsculas y minúsculas como nativeAttr , puedo usar querySelector para encontrar el elemento por su nombre de atributo. Pero si agrego programáticamente un atributo que distingue entre mayúsculas y minúsculas como setAttr , querySelector ya no encuentra el elemento html.
¿Cómo puedo configurar el atributo de distinción entre mayúsculas y minúsculas y también hacer que funcione con querySelector ?
const node = document.getElementById('node') node.setAttributeNS(null, 'setAttr', 'set') console.log('nativeAttr', document.querySelector('[nativeattr]')?.id) console.log('nativeAttr', document.querySelector('[nativeAttr]')?.id) console.log('setAttr', document.querySelector('[setattr]')?.id) console.log('setAttr', document.querySelector('[setAttr]')?.id) // the attribute is set in camelCase correctly console.log(node.getAttributeNS(null, 'setAttr')) // here are the names of the attributes; seems that nativeAttr is lowercase console.log('nativeAttr', node.attributes[1].name, node.attributes[1].localName) console.log('setAttr', node.attributes[2].name, node.attributes[2].localName) <div id="node" nativeAttr="native"></div> Los elementos svg utilizan atributos que distinguen entre mayúsculas y minúsculas, por lo que es un caso de uso válido. Por ejemplo:
// only one viewBox element console.log(document.querySelectorAll('[viewBox]').length) // add the viewBox attribute to the second svg const svg2 = document.getElementById('svg2') svg2.setAttributeNS(null, 'viewBox', '0 0 50 50') // now both svg elements show up console.log(document.querySelectorAll('[viewBox]').length) <svg id="svg1" width="30" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> <svg id="svg2" width="30" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> Entonces, como puede ver, funciona para svg , pero no para elementos html normales.
De acuerdo con laespecificación , se permiten letras mayúsculas en los nombres de los atributos.
En la sintaxis HTML, los nombres de atributos, incluso los de elementos extraños, se pueden escribir con cualquier combinación de letras ASCII inferior y ASCII superior .
Los atributos siempre se procesan en minúsculas , por lo que si proporciona el atributo nativeAttr , este se transformará en nativeattr .
Como se describe en el estándar HTML :
Todos los nombres de atributos en elementos HTML en documentos HTML se ponen en minúsculas ASCII automáticamente
Se recomienda usar kebab-case con nombres de atributos. Echa un vistazo a este ejemplo mínimo a continuación:
const el = document.getElementById('node'); console.log('before', el.getAttributeNS(null, 'native-attr' )) el.setAttributeNS(null, 'native-attr', 'changed'); console.log('after', el.getAttributeNS(null, 'native-attr' )) <div id="node" native-attr="native"></div>Lea también aquí: ¿los atributos de datos html5 no distinguen entre mayúsculas y minúsculas?
El carácter apropiado para seleccionar atributos de espacio de nombres es el carácter de barra vertical ( | ). Si no hay un prefijo de espacio de nombres, simplemente no usa nada antes de la canalización, por lo que se supone que [*|setAttr] selecciona su elemento. Sin embargo, en mis pruebas, no lo hace, a través de CSS ni querySelector :
const node = document.getElementById('node'); node.setAttributeNS(null, 'setAttr', 'set'); node.setAttributeNS('https://example.com/namespace', 'ns:someAttr', 'set'); console.log('html', node.outerHTML); console.log('nativeAttr', document.querySelector('[|nativeAttr]')?.id); console.log('setAttr', document.querySelector('[*|setAttr]')?.id); console.log('someAttr', document.querySelector('[*|someAttr]')?.id); @namespace ns url("https://example.com/namespace"); div[|nativeAttr] { color: blue; } div[*|setAttr] { color: red; } div[ns|someAttr] { color: green; } <div id="node" nativeAttr="native">Ran</div>La sintaxis no funciona incluso cuando se proporciona un prefijo y un espacio de nombres, por lo que también parece ser una pista falsa.
Esta respuesta es menos una respuesta, ya que es una documentación de los hallazgos, junto con un código que demuestra lo que debería funcionar. Las pruebas se ejecutaron en Microsoft Edge versión 97.0.1072.62 (compilación oficial) (64 bits) en Windows 10 versión 10.0.19043.1466.