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

categoría Computadoras y software / Programación / 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

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".



Artículos Relacionados

Sobre el autor
Cambio de css con javascript Cambio de css con javascript

Así como usted puede utilizar javascript para cambiar el HTML en una página web, también se puede utilizar para cambiar los estilos CSS. El proceso es muy similar.El primer paso es seleccionar el elemento que desea aplicar o cambiar un…

Cómo crear un cuadro de lista de selección múltiple en javascript para HTML5 y CSS3 programación Cómo crear un cuadro de lista de selección múltiple en javascript para HTML5 y CSS3 programación

Usted puede utilizar el código javascript seleccionar objeto de una manera poderosa para sus necesidades de programación HTML5 y CSS3. Para hacer el trabajo de selección múltiple, lo que tienes que hacer algunos cambios tanto en el HTML y…

Cómo crear casillas de verificación en javascript para HTML5 y CSS3 programación Cómo crear casillas de verificación en javascript para HTML5 y CSS3 programación

Las casillas de verificación cumplen otra función de entrada de datos útiles en javascript para la programación HTML5 y CSS3. Son útiles en cualquier momento que tiene datos booleanos. Si algún valor puede ser verdadera o falsa, una…

Cómo depurar javascript errores con la consola interactiva para HTML5 y CSS3 programación Cómo depurar javascript errores con la consola interactiva para HTML5 y CSS3 programación

La ventana de herramientas de desarrollo en javascript tiene otra herramienta realmente maravilloso llamado el consola. Hay tantas cosas que puedes hacer por tus páginas HTML5 con esta maravillosa herramienta. Intente este ejercicio para ver…

Cómo interpretar los botones de radio en javascript para HTML5 y CSS3 programación Cómo interpretar los botones de radio en javascript para HTML5 y CSS3 programación

Obtener información de un grupo de botones de radio en javascript requiere una técnica un poco diferente para su página HTML5 que la mayoría de los elementos del formulario. ni idea seleccionar objeto, no hay ningún objeto contenedor que…

Cómo recuperar y establecer las propiedades del objeto de código con javascript Cómo recuperar y establecer las propiedades del objeto de código con javascript

Después de crear un objeto y definir sus propiedades en javascript, tendrá que ser capaz de recuperar y cambiar esas propiedades. Las dos formas de acceder a las propiedades del objeto son mediante el uso de la notación de puntos o corchetes…

Cómo utilizar propiedades de formulario para codificar con javascript Cómo utilizar propiedades de formulario para codificar con javascript

En javascript, las propiedades de la Formulario objeto coincide con los atributos del elemento de formulario HTML. Se utilizan para obtener o establecer los valores del HTML forma elemento de atributos con javascript. Echa un vistazo a la…

Cómo utilizar las propiedades del objeto atributo para codificar con javascript Cómo utilizar las propiedades del objeto atributo para codificar con javascript

En javascript, el Cualidad objeto proporciona propiedades para trabajar con atributos dentro de los elementos HTML. Aquí está una lista de todos los Cualidad las propiedades del objeto.PropiedadUsarisIdLos rendimientos cierto si el atributo…

javascript y HTML javascript y HTML

Usted puede pensar en javascript como una extensión de html- un add-on, si se quiere.Así es como funciona. Etiquetas HTML crean objetos- javascript permite manipular esos objetos. Por ejemplo, se utiliza el HTML y etiquetas para crear…

Cómo utilizar getElementById de javascript para acceder a un elemento específico Cómo utilizar getElementById de javascript para acceder a un elemento específico

Usted puede utilizar javascript para acceder a un elemento dentro de una página HTML. Usted puede hacer esto al hacer cambios en el elemento o al estilo CSS. Pruébelo en un ejercicio.Abra su editor de texto con un documento nuevo o en…

Elementos básicos de html Elementos básicos de html

HyperText Markup Language (HTML) es el idioma de la web, donde elementos dictar el formato y el estilo de tu sitio. Elementos HTML componen la codificación descargado que ves cuando vas a una página web en su navegador web (como Internet Explorer,…

Cómo seleccionar elementos con jQuery en css3 Cómo seleccionar elementos con jQuery en css3

Puede usar jQuery para realizar una amplia gama de selecciones de objetos en su aplicación CSS3, pero en su mayor parte, a utilizar los selectores básicos. Puedes leer más sobre ellos en jQuery. Aquí hay una lista de selectores básicos que…

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