Video: 33.- Curso javaScript - Dom Crear y agregar nodos 2024
Uno de los componentes básicos para crear efectos especiales para cualquier página es la capacidad de realizar cambios dinámicos de HTML en la página. Por ejemplo, es posible que desee crear un efecto especial para el elemento seleccionado como se muestra en el siguiente ejemplo.
función ChangeStyles (evento) {// Obtener una referencia al elemento. var ThisElement = documento. getElementById (event. currentTarget. id); // Verifica el tipo de evento. if (event. type == "mouseover") {// Cambiar la clase CSS del elemento de destino. ThisElement. setAttribute ("clase", "Seleccionado");} else {ThisElement. setAttribute ("clase", "Normal");}}
Este código acepta un evento como entrada. El código obtiene una referencia al elemento proporcionado por el objeto Evento. Luego verifica el evento. Escriba propiedad para determinar qué tipo de evento ha sucedido (ya sea un mouseover o un mouseout). El tipo de evento determina qué tipo de formato utiliza el elemento.
Por supuesto, sería útil proporcionar algún tipo de automatización para asignar un controlador de eventos para los eventos onmouseover y onmouseout. El siguiente código realiza esta tarea para usted:
// Obtenga una lista de elementos que usan la etiqueta . var ElementList = documento. getElementsByTagName ("p"); // Procesa cada una de estas etiquetas a su vez. for (var i = 0; i
Esta es otra variante de interactuar con un grupo de elementos que usan la misma etiqueta, la etiqueta
en este caso. El código obtiene una matriz de estos elementos llamando a getElementsByTagName (). A continuación, asigna la función ChangeStyles () a las propiedades onmouseover y onmouseout de cada elemento. El resultado es que cada etiqueta
en la página reacciona cuando coloca el mouse sobre ella.
