<jupyter_start><jupyter_text>El modelo del objeto documento (*DOM*).Al abrir una ventana en cualquier navegado web, se crea un documento el cual contiene una estructura base de *HTML*. Dicho documento también tiene las propiedades un objeto, el  cual a su vez contiene otros objetos o elementos.El modelo del objeto documento (*DOM*) es una manera estandarizada en la que se puede acceder a los elementos de un documento *HTML* mediante *Javascript*.En la siguiente liga es posible acceder a documentación sobre el *DOM*.https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model  Árbol de nodos.El *DOM* permite identificar a los elementos de un documento *HTML* como una serie de nodos que a su vez podrían contener a otros nodos, los cuales se van bifurcando a partir de la raiz del documento tal como lo hacen las ramas de un árbol a partir de su tronco. El objeto ```document```.El objeto ```document``` contiene al documento *HTML* que se despiega en la ventana de un navegador y es mediante el acceso a sus propiedades y métodos como se puede acceder a los elementos que contiene. Tipos de nodos que puede contener el *DOM*.* ```Document```, el cual corresponde al nodo raíz.* ```Element```, el cual representa a cada elemento por medio de su etiqueta.*  ```Attr```, correspondiente a un atributo del elemento.* ```Text```, contiene el texto que está dentro del elemento.* ```Comment```, comentarios del documento.  Manipulación de nodos.Mediante el *DOM*, es posible acceder a cada elemento del documento *HTML* y realizar las siguientes operaciones:* Acceder a las propiedades de un elemento.* Establecer valores de las propiedades de un elemento.* Mover un elemento de la página.* Crear o eliminar elementos.**NOTA:** El acceso a los elementos de un documento *HTML* solamente pueden ser realizados cuando la página se haya cargado por completo. Acceso a los nodos.Como se mencionó previamente, el *DOM* presenta una estructura similar a la del tronco de un árbol a partir del cual se bifurcan ramas. Se dice que el elemento que contiene a otros elementos es el padre de estos.```  padre (parent)  ├─hermano (sibling)  ├─elemento  │ └──── hijos (children)  └───hermano (sibling)```  El método ```document.getRootNode()```.Este método permite acceder al nodo raíz del documento. El elemento resultante contiene a los elementos ```head``` y ```body``` como nodos hijo. **Ejemplo:**:* Abrir una ventana en blanco dentro de un navegador (se recomienda Firefox).* Seleccionar la consola del navegador a partir de la inspección de los elementos.* Al ejecutar el siguente código se asignará el nodo raíz será asignado a la variable ```documento```.``` javascriptconst documento = document.getRootNode();```* Para acceder al elemento ```body``` del documento *HTML* se ejecuta lo siguiente:``` javascriptdocumento.body;```Se desplegará el contenido y los atributos del elemento ```body```.  Propiedades básicas de un elemento.Los elementos contienen múltiples propiedades emanadas de ```document```, pero las más características son: * ```textContent```, la cual corresponde al texto del elemento.* ```children```, la cual corresponde a un arreglo que enlista a los elementos que contiene el elemento.* ```childNodes```, la cual corresponde a un arreglo que enlista los nodos que contiene el elemento.* ```innerHTML```, la cual corresponde a un objeto de tipo ```String``` que contiene el código *HTML* del elemento.* ```innerText```, la cual corresponde a un objeto de tipo ```String``` que contiene el texto del elemento y sus elementos contenidos.* ```id```, la cual corresponde a un objeto de tipo ```String``` que contiene el atributo ```id``` del elemento.* ```className```, la cual corresponde al valor del atributo ```class``` del elemento.* ```parentElement``` la cual corresponde al elemento padre del elemento actual.* ```parentNode``` la cual corresponde al nodo padre del elemento actual.* ```style``` la cual contiene los propiedades de estilo del elemento. **Ejemplo:**<jupyter_code>%%html
<div id="contenedor-1">
  <div id="ejemplo-1">Texto de ejemplo <b>con efectos</b> y <i>más efectos.</i></div>
<div>
%%javascript
let contenedor_1 =  document.getElementById("contenedor-1");
let elemento_1 = document.getElementById("ejemplo-1");
let parrafo = document.createElement("p");
parrafo.textContent = elemento_1.innerHTML;                                          
contenedor_1.appendChild(parrafo);
%%html
<div id="contenedor-2">
  <div id="ejemplo-2">Texto de ejemplo <b>con efectos</b> y <i>más efectos.</i></div>
<div>
%%javascript
let contenedor_2 =  document.getElementById("contenedor-2");
let elemento_2 = document.getElementById("ejemplo-2");
let hijos = elemento_2.children;
for (let item in hijos) {
    let parrafo = document.createElement("p");
    parrafo.textContent = "Elemento: " + hijos[item].nodeName + ", texto: " + hijos[item].textContent;                                          
    contenedor_2.appendChild(parrafo);
}<jupyter_output><empty_output><jupyter_text>Creación de un elemento.Es posible crear un elemento mendiante el método ```document.createElement()```, indicando el tipo de elemento mediante el nombre de su etiqueta. **Ejemplo:*** Se creará un elemento de tipo ```p``` y se asignará a la variable ```parrafo```.<jupyter_code>%%html
<div id="contenedor-3">
  <div id="ejemplo-3"></div>
<div>
%%javascript
let ejemplo_3 = document.getElementById("ejemplo-3");
let parrafo = document.createElement("p");
parrafo.textContent="Hola, Mundo."
ejemplo_3.append(parrafo);<jupyter_output><empty_output>
StarcoderdataJupyterStructuredCleanDedup