Desarrollo de contenido

Unidad 3:
JavaScript

Algunos métodos del objeto

document en JavaScript
Ingeniería Web I
Algunos métodos del objeto document en
JavaScript
1. document.write
Por medio de este método podemos escribir código HTML en el documento HTML.
Veamos un ejemplo:

• En el archivo index.js creado en la sección anterior escribamos el siguiente código

en JavaScript:

Ilustración 5.
Método write del objeto document.

A través de estas dos líneas, estamos indicando por medio de JavaScript, que agregue al
documento HTML index.html la etiqueta <h1> con el texto Hola Mundo y la etiqueta <hr>.

Nota. López, A., 2021, Método write del objeto document, [Ilustración], Fuente. Elaboración propia.

• En el archivo index.html no agregamos ningún elemento en la etiqueta <body, a

excepción de la etiqueta <script>, como se ve a continuación:

Ilustración 6.
Archivo index.html.

Nota. López, A., 2021, Archivo index.html, [Ilustración], Fuente. Elaboración propia.
 • Si abrimos el archivo index.html con el navegador obtendremos el siguiente
resultado:

Ilustración 7.
Visualización del archivo index.html.

Nota. López, A., 2021, Visualización del archivo index.html, [Ilustración], Fuente. Elaboración propia.

• En la ilustración N°7, se puede apreciar que por medio de JavaScript a través del
método write pudimos agregar elementos o etiquetas al código HTML.

2. document.getElementById
Devuelve un elemento cuyo atributo ID coincide con el enviado en el parámetro.

En el siguiente ejemplo, declararemos una etiqueta <p> con el atributo ID igual a titulo.

Ilustración 8.
Etiqueta p con id igual a título.

Nota. López, A., 2021, Etiqueta p con id igual a título, [Ilustración], Fuente. Elaboración propia.
 • En el archivo index.js a través del método document.getElementById, buscamos en
el archivo index.html un elemento cuyo atributo ID es igual a titulo y le asignamos
el texto Hola Mundo a través de la propiedad textContent, como se ve a
continuación:

Ilustración 9.
Uso del método getElementById.

Nota. López, A., 2021, Uso del método getElementById, [Ilustración], Fuente. Elaboración propia.

• Al abrir el archivo index.html con el navegador el resultado es el siguiente:

Ilustración 10.
Visualización de la etiqueta p.

Nota. López, A., 2021, Visualización de la etiqueta p, [Ilustración], Fuente. Elaboración propia.

Para aprender más

Si deseas conocer más sobre como modificar atributos, clases y estilos en el
DOM, te invito a leer el siguiente material:

• URL:
https://www.digitalocean.com/community/tutorials/como-
modificar-atributos-clases-y-estilos-en-el-dom-es
 3. document.getElementsByName
Este método obtiene una lista de elementos cuyo atributo NAME coincida con el enviado
en el parámetro.

• En el siguiente documento HTML se definen tres etiquetas <h1>, <h2> y <h3> con
igual valor saludo1 para el atributo NAME.

Ilustración 11.
Etiquetas h con igual valor para el atributo name.

Nota. López, A., 2021, Etiquetas h con igual valor para el atributo name, [Ilustración], Fuente. Elaboración propia.

• Si usamos el método document.getElementsByName y le pasamos como

parámetro el valor saludo1, deberemos obtener una lista de tres elementos. En el
archivo index.js escribimos el siguiente código:

Ilustración 12.
Uso del método getElementsByName.

Nota. López, A., 2021, Uso del método getElementsByName, [Ilustración], Fuente. Elaboración propia.
 • Si abrimos el archivo index.html con el navegador observamos lo siguiente:

Ilustración 13.
Visualización de las etiquetas h.

Nota. López, A., 2021, Visualización de las etiquetas h, [Ilustración], Fuente. Elaboración propia.

De la anterior imagen, se observa que después de buscar los elementos por el atributo
NAME con valor saludo1 se obtienen tres elementos.

Además, recordemos que el método document.getElementsByName devuelve una lista de

elementos o etiquetas y es por ello que podemos hacer elementos.length. Length es un
método de los arreglos en JavaScript que devuelve el número de elementos que contiene
un arreglo.

Para aprender más

Si deseas conocer más sobre los métodos de un arreglo en JavaScript,
lee el siguiente material:

• URL: https://lenguajejs.com/javascript/fundamentos/arrays/

4. document.getElementsByClassName
Por medio de este método podemos obtener todos los elementos que tengan la misma
clase (atributo CLASS) indicada por parámetro. Recordemos que las clases son un tipo de
selector de CSS.
 • Definamos un nuevo archivo de tipo CSS llamado styles.css en el directorio
JavaScript dónde venimos trabajando, con la siguiente clase:

Ilustración 14.
Estilo de la clase .textos.

Nota. López, A., 2021, Estilo de la clase .textos, [Ilustración], Fuente. Elaboración propia.

• En el archivo index.html además de invocar el archivo styles.css definimos tres

elementos <h1>, <h2> y <h3> con la misma clase textos como se ve a continuación:

Ilustración 15.
Clase .textos.

Nota. López, A., 2021, Clase .textos, [Ilustración], Fuente. Elaboración propia.
 • En el archivo index.js escribimos el siguiente código en donde buscamos los
elementos que coincidan con la clase textos, a través del método
document.getElementsByClassName e imprimimos el resultado en la etiqueta <p>,
a través del método Length del arreglo elementos, utilizando el método
document.write como se ve a continuación:

Ilustración 16.
Uso del método getElementsByClassName.

Nota. López, A., 2021, Uso del método getElementsByClassName, [Ilustración], Fuente. Elaboración propia.

• El resultado lo podemos apreciar abriendo el navegador como se muestra a

continuación:

Ilustración 17.
Visualización del método getElementsByClassName.

Nota. López, A., 2021, Visualización del método getElementsByClassName, [Ilustración], Fuente. Elaboración
propia.

5. document.querySelector
En la unidad 2 vimos los tipos de selector CSS, entre esos, selector por clase y selector por
ID del elemento. Este método busca por cualquiera de los dos tipos de selectores
mencionados, el primer elemento que cumpla con el selector pasado como parámetro.
 • Definamos el siguiente estilo en el archivo styles.css:

lustración 18.
Estilo de clase .textos 2.

Nota. López, A., 2021, Estilo de la clase .textos 2, [Ilustración], Fuente. Elaboración propia.

• En el archivo index.html creamos tres etiquetas <h1>, <h2> y <h3> con el selector
de clase textos como se ve a continuación:

Ilustración 19.
Clase .textos 2.

Nota. López, A., 2021, Clase .textos 2, [Ilustración], Fuente. Elaboración propia.
 • En el archivo index.js vamos a encontrar el primer elemento que coincida con el
selector de clase textos con el método document.querySelector y a través del
método document.write mostramos su texto en pantalla:

Ilustración 20.
Uso del método querySelector.

Nota. López, A., 2021, Uso del método querySelector, [Ilustración], Fuente. Elaboración propia.

• Después de realizar los pasos anteriores, abrimos el archivo index.html con el

navegador, en donde se puede apreciar que el texto mostrado es Hola, el cual
coincide con el texto de la etiqueta <h1>, ya que fue este, el primer elemento que
encontró el método document.querySelector a través del selector de clase textos.

Ilustración 21.
Visualización del método querySelector.

Nota. López, A., 2021, Visualización del método querySelector, [Ilustración], Fuente. Elaboración propia.