Trabajar con el contenido de los elementos de código con javascript

En javascript, puede visualizar los tipos de nodo y los valores de nodo utilizando el DOM HTML. También puede configurar los valores de propiedad de los elementos dentro del DOM utilizando el Elemento

Conteúdo

objeto. Cuando usa 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 recargar 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 etiqueta del elemento. Por ejemplo, en el código siguiente, el innerHTML propiedad de la div elemento contiene una p elemento y su hijo nodo de texto:


Este es un poco de texto.

Es muy común en programación web para crear vacío div elementos en el documento HTML y luego utilice el innerHTML propiedad para insertar dinámicamente HTML en los elementos.

Para recuperar y mostrar el valor de la innerHTML propiedad, usted 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 la document.write () método es

Esto es un texto.


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 javascript precedente será que el p elemento y la sentencia de texto en el marcado originales serán reemplazados con las palabras " Hola allí "! El documento HTML original se mantiene sin cambios, pero la representación DOM y la prestación de la página web se actualiza para reflejar el nuevo valor. Debido a que la representación DOM del documento HTML es lo que muestra el explorador, la pantalla de su página web también se actualizan.

Configuración de atributos

Para establecer el valor de un atributo HTML, puede utilizar el setAttribute () Método:

document.body.firstChild.innerHTML.setAttribute (" # 148 ;, clase " miclase ") -

El resultado de la ejecución de 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".




» » » » Trabajar con el contenido de los elementos de código con javascript