logo

Modelo de objetos de documento

  1. Objeto de documento
  2. Propiedades del objeto del documento
  3. Métodos de objeto del documento.
  4. Ejemplo de objeto de documento

El objeto del documento representa todo el documento html.

Cuando un documento html se carga en el navegador, se convierte en un objeto de documento. Es el elemento raíz que representa el documento html. Tiene propiedades y métodos. Con la ayuda del objeto de documento, podemos agregar contenido dinámico a nuestra página web.

Como se mencionó anteriormente, es el objeto de la ventana. Entonces

 window.document 

es lo mismo que

 document 

Según el W3C - 'El Modelo de Objetos de Documento (DOM) del W3C es una plataforma y una interfaz neutral en cuanto al idioma que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento.'


Propiedades del objeto del documento

Veamos las propiedades del objeto de documento a las que el objeto de documento puede acceder y modificar.


Métodos de objeto del documento.

Podemos acceder y cambiar el contenido del documento mediante sus métodos.

Los métodos importantes de objeto de documento son los siguientes:

MétodoDescripción
escribir('cadena')escribe la cadena dada en el documento.
writeln('cadena')escribe la cadena dada en el documento con un carácter de nueva línea al final.
obtenerElementoById()devuelve el elemento que tiene el valor de identificación dado.
obtenerElementosPorNombre()devuelve todos los elementos que tienen el valor del nombre dado.
getElementsByTagName()devuelve todos los elementos que tienen el nombre de etiqueta dado.
getElementsByClassName()devuelve todos los elementos que tienen el nombre de clase dado.

Acceder al valor del campo por objeto del documento

En este ejemplo, obtendremos el valor del texto de entrada por usuario. Aquí estamos usando documento.formulario1.nombre.valor para obtener el valor del campo de nombre.

Aquí, documento es el elemento raíz que representa el documento html.

formulario 1 es el nombre del formulario.

nombre es el nombre del atributo del texto de entrada.

valor es la propiedad que devuelve el valor del texto de entrada.

Veamos el ejemplo simple de un objeto de documento que imprime el nombre con un mensaje de bienvenida.

 function printvalue(){ var name=document.form1.name.value; alert('Welcome: '+name); } Enter Name: 

Salida del ejemplo anterior

Ingrese su nombre: