javascript - tipos - para qué sirve el elemento data-* en html
Mejores prácticas: clase o atributo de datos como identificador (4)
La mejor forma de probar estas cosas es buscar un banco de pruebas en jsperf.com
Aquí está el que le interesa: http://jsperf.com/id-vs-class-vs-data-attribute
El selector más eficiente es usar clases.
Esto es probablemente una consecuencia de que las clases se usan más para la selección, por lo que los navegadores lo optimizarán más
Últimamente me he estado preguntando cuál es la mejor manera de llevar a cabo acciones de JavaScript en múltiples elementos.
A mi modo de ver hay 2 posibilidades:
- O agrego una clase css a mis elementos, que no necesariamente corresponde a ninguna regla css existente:
<div class="validation-required"></div> - O uso un atributo de datos como el siguiente:
<div data-validation-required></div>
En mi IDE (Visual Studio 2012 usando R #), si uso el primer método, recibo una advertencia que dice que no debo usar clases css que no estén definidas. Lo que me hace creer que esta podría no ser la mejor idea de todos modos. Sin embargo, este es el método que más he usado, a menudo visto, aunque esto podría ser una reliquia de días antes de que pudiéramos usar el atributo de datos.
Entonces, mi pregunta es bastante simple, ¿de qué manera debería ir simplemente a "etiquetar" un elemento para su posterior procesamiento?
Gracias por cualquier respuesta
PD: Me doy cuenta de que esta pregunta podría ser propensa a opiniones subjetivas, aunque espero que exista un consenso sobre qué usar en los navegadores modernos.
PPS: He realizado una búsqueda sobre este tema, pero la mayoría de las preguntas son sobre el rendimiento, que no es mi principal preocupación en situaciones puntuales.
Para los futuros espectadores de esta pregunta:
Las especificaciones para el uso de elementos de datos personalizados, y el uso de ejemplos, se dan aquí:
Según W3C
data- *
Los atributos de datos personalizados están destinados a almacenar datos personalizados privados en la página o aplicación, para los cuales no hay atributos o elementos más apropiados. Estos atributos no están destinados a ser utilizados por software que es independiente del sitio que utiliza los atributos.
El atributo de clase tiene varios roles en HTML: como un selector de hoja de estilos (cuando un autor desea asignar información de estilo a un conjunto de elementos). Para el procesamiento de propósito general por los agentes de usuario.
Si usa el atributo de class , puede beneficiarse de la búsqueda nativa getElementsByClassName y delclassList para alternar, agregar y eliminar clases. No hay nada como Ver el comentario de Oliver Moran getElementsByAttributeValue , necesita iterar.
Por otro lado, si necesita almacenar datos múltiples, puede usar el atributo del conjunto de datos .
Por lo tanto, si desea buscar o si los datos afectan el aspecto del elemento, usaría la class . Si necesita almacenar varios datos, los data serían más apropiados.
Si simplemente desea asociar "valores" a elementos DOM con fines computacionales, entonces data-attribute es el camino a seguir desde entonces,
todo lo que sea "datos-" se tratará como un área de almacenamiento para datos privados (privado en el sentido de que el usuario final no puede verlo, no afecta el diseño o la presentación)
Además, jQuery proporciona el .data() , que hace la vida más fácil para que no tengas la molestia de usar el selector [data-*] .
Si está proporcionando un nombre de clase, considerando la semántica , debería tener un estilo asociado.
John Resig ha escrito sobre data-attributes