El trabajo con los contenidos de los elementos de código con javascript
En javascript, puede mostrar los tipos de nodos y valores de nodo utilizando el código HTML DOM. También puede establecer valores de las propiedades de los elementos en el DOM utilizando el Elemento objeto. Cuando se utiliza javascript para establecer las propiedades de los elementos DOM, los nuevos valores se reflejan en tiempo real dentro del documento HTML.
Cambio de las propiedades de los elementos en un documento web con el fin de reflejar de manera instantánea en el navegador, sin necesidad de refrescar o volver a cargar la página web, es una piedra angular de lo que antes se llamaba la web 2.0.
innerHtml
La propiedad más importante de un elemento que se puede modificar a través del DOM es la innerHtml propiedad.
los innerHtml propiedad de un elemento contiene todo entre el comienzo y el final de la etiqueta de elemento. Por ejemplo, en el siguiente código, la innerHtml propiedad de la div elemento contiene una pag elemento y su hijo nodo de texto:
Este texto issome.
Es muy común en la programación web para crear vacíos div elementos en su documento HTML y luego usar el innerHtml propiedad para insertar dinámicamente HTML en los elementos.
Video: Curso Básico de javascript 18.- Modificando el estilo de los elementos
Para recuperar y mostrar el valor de la innerHtml propiedad, se puede utilizar el siguiente código:
var getTheInner = document.body.firstChild.innerHTML-document.write (getTheInner) -
En el código anterior, el valor que se emitirá por el document.write () método es
Este es un texto.
Video: Habilitar Y Desabilitar Elementos
Ajuste de la innerHtml propiedad se realiza de la misma forma en que se establece la propiedad de cualquier objeto:
document.body.firstChild.innerHTML = “¡Hola!” -
El resultado de ejecutar el código javascript anterior será que el pag elemento y la sentencia de texto en el marcado originales serán reemplazadas por las palabras “¡Hola!” El documento HTML original permanece sin cambios, pero la representación DOM y la prestación de la página web se actualizarán para reflejar el nuevo valor. Debido a que la representación DOM del documento HTML es lo que las pantallas del navegador, la pantalla de la página web también serán actualizadas.
el establecimiento de atributos
Para establecer el valor de un atributo HTML, puede utilizar el setAttribute () método:
document.body.firstChild.innerHTML.setAttribute ( “clase”, “miclase”) -
El resultado de ejecutar esta declaración es que el primer elemento hijo del elemento del cuerpo se le dará un nuevo atributo llamado “clase” con un valor de “mi clase”.