Comentario: Cuando hablas de "html5" en la multitud, puedes sentirte como un bailarín exótico o unicornio que llega al medio de la casa con un claro significado de "Soy genial, lo sé"
Esto no puede decir que somos vanos. La API HTML básica no se ha desarrollado en los últimos años, de modo que cuando aparezca una pequeña característica nueva, como el marcador de posición, nos dará un aspecto novedoso. Aunque muchas características de HTML5 se implementan en nuevos navegadores, la mayoría de los programadores aún no saben o nunca han oído hablar de algunas API pequeñas y muy útiles. ¡En este artículo, presentaré algunas API de esas y daré la bienvenida a todos para descubrir API HTML5 más desconocidas!
Element.ClassList
La API de Lista de clases proporciona una función básica de controlar CSS que hemos implementado a lo largo de los años utilizando la biblioteca de herramientas JavaScript:
// Agregar una clase CSS
myelement.classList.add ("NewClass");
// Eliminar una clase CSS
myelement.classlist.remove ("existenteclass");
// Compruebe si tiene una clase CSS
myelement.classlist.contains ("oneclass");
// Invertir la existencia o no de una clase CSS
myelement.classlist.toggle ("otra clase");
El valor principal de esta API recientemente emergente es: simple y práctico.
API contextmenu
Esta nueva API contextMenu es muy útil: no reemplaza el menú original con clic derecho, sino que agrega su menú personalizado con clic derecho al menú de clic derecho en el navegador:
<sección contextmenu = "mymenu">
<!-Agregar menú->
<menú tipo = "context">
<Menuitem Label = "Refresh Post" Icon = "/Images/Refresh-Icon.png"> </menuitem>
<Menu Label = "Compartir en ..." icon = "/Images/Share_icon.gif">
<Menuitem Label = "Twitter" Icon = "/Images/Twitter_icon.gif"> </menuitem>
<Menuitem etiqueta = "facebook" icon = "/images/facebook_icon16x16.gif"> </menuitem>
</menú>
</menú>
</section>
Cabe señalar que es mejor usar JavaScript para crear estos códigos de menú dinámicamente, porque el evento del menú eventualmente llamará a JavaScript para ejecutar tareas. Si el usuario prohíbe a JavaScript, no se generará el menú de clic derecho y no verá el menú al mismo tiempo.
Elemento.dataSet
Usando la API del conjunto de datos, los programadores pueden obtener fácilmente o establecer datos:* Propiedades personalizadas:
/* El siguiente código es un ejemplo
<div data-name = "myDiv" data-id = "myID" data-my-custom-key = "Este es el valor"> </div>
*/
// Obtener elementos
var elemento = document.getElementById ("myDiv");
// Obtener ID
var id = element.dataset.id;
// Lea el valor de "Data-My-Custom-Key"
var OSCUSYKEY = element.dataset.myCustomkey;
// Modificar a otros valores
element.dataset.mycustomkey = "algún otro valor";
// apagar:
// <div data-name = "myDiv" data-id = "myID" data-my-custom-key = "algún otro valor"> </div>
No hace falta decir que es tan simple y práctico como la lista de clases
Ventana. API PostMessage
Incluso IE8 ha apoyado la API posterior a la presentación durante muchos años. La función de la API posterior a la Message es que le permite pasar datos de información entre dos ventanas del navegador o iframes:
// Desde una ventana o iframe en el dominio A, envíe un mensaje a una ventana o Ifame en el dominio B.
var iframeWindow = document.getElementById ("iframe"). contentwindow;
iframeWindow.PostMessage ("¡Saludos desde la primera ventana!"); </p> <p> // Recibe mensajes en una ventana o iframe en un segundo dominio diferente
Window.adDeventListener ("Mensaje", function (Event) {
// Prueba la legalidad del dominio
if (event.origin == "http://www.vevb.com") {
// Información del registro de salida
console.log (event.data);
// Mensaje de comentarios
event.source.PostMessage ("¡Cómo estás bien!");
}
]);
El cuerpo del mensaje solo puede ser una cadena, ¡pero puede usar JSON.Stringify y JSON.PARSE para convertir los mensajes en cuerpos de datos más significativos!
atributo de enfoque automático
El atributo de enfoque automático puede hacer que el botón, la entrada o los elementos TextARea se conviertan automáticamente en el foco de la página cuando la página está cargada:
<Input AutoFocus = "Autofocus" />
<Botton Autofocus = "AutoFocus"> ¡Hola! </botón>
<TextAREA AutoFocus = "AutoFocus"> </extAREA>
En lugares como las páginas de búsqueda de Google con patrones fijos, la propiedad de enfoque automático es la característica ideal.
El navegador admite cada API de manera ligeramente diferente, así que verifique el soporte de estas características antes de usarlas. Tómese un tiempo para leer la descripción detallada de cada API, y creo que encontrará más.