Mi DOM: Nodos y manipulación en JavaScript para Informática
Documento sobre Mi DOM. El Pdf explora los conceptos fundamentales del Document Object Model (DOM) en JavaScript, incluyendo tipos de nodos como Document, Element, Attr, Text y Comment, con ejemplos prácticos de acceso y manipulación. Este material de estudio de Informática para Universidad también cubre la modificación de clases y estilos CSS de elementos HTML.
Ver más27 páginas
Visualiza gratis el PDF completo
Regístrate para acceder al documento completo y transformarlo con la IA.
Vista previa
Ejemplo de Tipos de Nodos en DOM
Mi DOM Ejemplo de Tipos de Nodos en DOM <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init ial-scale=1.0"> <title>Tipos de Nodos en DOM</title> </head> <body> <! - - Nodo de Comentario - - > <! -- Este es un comentario en la página - - ><div id="contenedor" class="ejemplo"> <! - - Nodo de Texto - - ><p>Este es un párrafo .< /p> </div> <script> // Nodo Documentconsole. log(document) ;// Representa todo el documento// Nodo Elementconst contenedor = document.getElem entById("contenedor"); console. log(contenedor ) ; // Elemento <div>// Nodo At trconst atributo = contenedor .getAttributeNode("class") ; console . log (atributo) ; // Nodo de atributo "class"// Nodo Textconst texto = contenedor.firstElementChild. firstCh ild; console. log(texto) ; // Nodo de texto "Este es un pár rafo. "// Nodo Commentconst comentarios = Array . from (documen t . childNodes ) . filter (node => node.nodeType === 8); console. log(comentarios[0]);// Nodo de comentario "Este es un comentario en la página" </script> </body> </html>
Explicación de los Nodos
Mi DOM 1Explicación de los Nodos
-
Document :
- El nodo raíz que representa todo el documento.
- Ejemplo: console. log (document ) ; .
-
Element :
- Representa un elemento HTML o XHTML.
- Ejemplo: console. log (contenedor ) ; accede al <div> .
- Attr :
- Representa un atributo de un elemento HTML.
- Ejemplo: console. log(atributo); accede al atributo class="ejemplo"
-
Text :
- Representa el contenido textual de un elemento HTML.
- Ejemplo: console. log(texto); muestra "Este es un párrafo.".
-
Comment :
- Representa un comentario HTML.
- Ejemplo: Filtra los nodos comment y muestra "Este es un comentario en la página".
Este ejemplo es suficiente para entender los principales tipos de nodos del DOM que se utilizan en XHTML.
Métodos de Selección de Elementos
- getElementById(id)
- Selecciona un único elemento basado en su atributo id .
- Características:
- Devuelve un único elemento HTML (o nul1 si no existe).
- El id debe ser único en el documento.
- Ejemplo: <! DOCTYPE html> <html> <head Mi DOM 2<title>getElementById</title> </head> <body> <h1 id="titulo">Hola, Mundo</h1> <script> const elemento = document . getElementById( "titulo"); console. log(elemento) ; // <h1 id="titulo">Hola, Mund o</h1>console.log(elemento.textContent);// "Hola, Mundo" </script> </body> </html>
- getElementsByTagName (etiqueta)
- Selecciona todos los elementos que coincidan con una etiqueta HTML.
- Características:
- Devuelve una colección de nodos ( HTMLCollection ).
- Se puede acceder a cada nodo por índice.
- Ejemplo: html Copiar código <! DOCTYPE html> <html> <head: <title>getElementsByTagName</title> </head> <body> <p>Primer párrafo</p> <p>Segundo párrafo</p> <script> const parrafos = document . getElementsByTagName ("p"); console. log(parrafos); // HTMLCollection con los 2 < p>console. log(parrafos[0].textContent);// "Primer párrafo"c onsole. log(parrafos[1]. textContent) ;// "Segundo párrafo" Mi DOM 3</script> </body> </html>
- getElementsByName (name)
- Selecciona todos los elementos que tengan un atributo name con el valor especificado.
- Características:
- Devuelve una colección de nodos ( NodeList o HTMLCollection ).
- Comúnmente usado en formularios.
- Ejemplo: <! DOCTYPE html> <html> <head: <title>getElementsByName</title> </head> <body <input type="text" name="usuario" value=" John"> <input type="text" name="usuario" value=" Jane"> <script> const campos = document . getElementsByName ( "usuari o"); console. log(campos) ; // NodeList con los 2 inputscon sole. log(campos[0].value) ; // "John"console. log (campos [1] . va lue ) ; // " Jane" </script> </body </html>
- querySelector (selector)
- Selecciona el primer elemento que coincide con un selector CSS.
- Características:
Mi DOM
4
- Usa selectores CSS estándar (como . clase , #id , div, etc.).
- Devuelve el primer elemento coincidente (o null si no encuentra ninguno).
- Ejemplo: <! DOCTYPE html> <html> <head> <title>querySelector</title> </head> <body: <div class="contenedor">Primer div</div> <div class="contenedor">Segundo div</div> <script> const elemento = document . querySelector (". contenedo r"); console. log (elemento) ; // <div class="contenedor">Pr imer div</div> </script> </body> </html>
- querySelectorAll(selector)
- Selecciona todos los elementos que coincidan con un selector CSS.
- Características:
- Devuelve un NodeList , que es similar a un array.
- Permite recorrer los elementos con un bucle.
- Ejemplo: <! DOCTYPE html> <html> <head: <title>querySelectorAll</title> </head> <body> Mi DOM 5<div class="contenedor">Primer div</div> <div class="contenedor">Segundo div</div> <script> const elementos = document . querySelectorAll(". conte nedor"); console. log (elementos); // NodeList con los 2 divs elementos. forEach(elemento => console. log(elemento. textContent ) ); // Salida:// "Primer div" // "Segundo div" </script> </body> </html>
Comparación de Métodos de Selección
Comparación de Métodos
| Método | Selecciona | Devuelve | Uso Común |
|---|---|---|---|
| getElementById | Por id | Elemento único | Acceso directo a un único elemento. |
| getElementsByTagName | Por etiqueta | HTMLCollection | Seleccionar varios elementos del mismo tipo. |
| getElementsByName | Por atributo name | NodeList / HTMLCollection | Formularios con atributos name |
| querySelector | Primer match CSS | Elemento único | Selección rápida y flexible. |
| querySelectorAll | Todos los matches CSS | NodeList | Seleccionar múltiples elementos con CSS. |
Recomendación de Métodos
Recomendación Para flexibilidad y modernidad, querySelector y querySelectorAll son los métodos más potentes y utilizados actualmente. Sin embargo, usa getElementById para un Mi DOM 6acceso rápido y directo a elementos específicos con id .
Crear Nodos de Texto
Descripción de Nodos de Texto
2. Crear Nodos de Texto Descripción · Usa document.createTextNode("texto") para crear un nodo de tipo Text .
Ejemplo de Creación de Nodos de Texto
Ejemplo <! DOCTYPE html> <html> <head> <title>Crear Nodos de Texto</title> </head> <body: <div id="contenedor "></div> <script> // Crear un nodo de textoconst texto = document.createTextN ode ("Texto dentro de un div. "); / / Agregar el nodo de texto al divconst contenedor = docume nt.getElementById("contenedor"); contenedor . appendChild(texto); console. log( "Texto añadido al div:", texto) ; </script> </body> </html> . Salida: El div con id = " contenedor ! contiene el texto "Texto dentro de un div."
Añadir Nodos al DOM
Descripción de Añadir Nodos
3. Añadir Nodos Descripción · Usa appendchild() para agregar un nodo como hijo de otro nodo.
Ejemplo de Añadir Nodos
Ejemplo Mi DOM 7<! DOCTYPE html> <html> <head <title>Añadir Nodos</title> </head> <body> <ul id="lista"> <li>Elemento 1</li> <li>Elemento 2</li> </ul> <script> // Crear un nuevo elemento <li>const nuevoElemento = docume nt.createElement ("li"); nuevoElemento. textContent = "Elemento 3"; / / Añadir el nuevo elemento a la listaconst lista = documen t. getElementById("lista"); lista. appendChild(nuevoElemento) ; console. log ( "Nuevo elemento añadido:", nuevoElement o); </script> </body </html> · Salida: La lista ( <ul> ) ahora tiene un tercer elemento: "Elemento 3."
Eliminar Nodos del DOM
Descripción de Eliminar Nodos
4. Eliminar Nodos Descripción · Usa parentNode. removeChild (nodo) para eliminar un nodo del DOM.
Ejemplo de Eliminar Nodos
Ejemplo <! DOCTYPE html> <html> <head> Mi DOM 8<title>Eliminar Nodos</title> </head> <body> <ul id="lista"> <li id="item1">Elemento 1</li> <li id="item2">Elemento 2</li> </ul> <script> // Seleccionar el elemento a eliminarconst elementoAElimina r = document.getElementById("item2"); // Eliminar el elemento elementoAEliminar . parentNode . removeChild (elementoAE liminar ); console . log("Elemento eliminado:", elementoAElimina r); </script> </body> </html> · Salida: El segundo elemento de la lista ( <li>Elemento 2</li> ) es eliminado.
Reemplazar Nodos en el DOM
Descripción de Reemplazar Nodos
5. Reemplazar Nodos Descripción · Usa parentNode. replaceChild(nuevoNodo, nodoViejo) para reemplazar un nodo existente por otro.
Ejemplo de Reemplazar Nodos
Ejemplo <! DOCTYPE html> <html> <head: <title>Reemplazar Nodos</title> </head> <body> Mi DOM 9<div id="contenedor "> <p>Este es el párrafo original .< /p> </div> <script> // Crear un nuevo elementoconst nuevoDiv = document. createE lement ("div"); nuevoDiv. textContent = "Este es un div que reemplaz a el párrafo."; // Seleccionar el elemento a reemplazarconst parrafoOrigina l = document.querySelector("#contenedor p"); / / Reemplazar el párrafo por el nuevo div parrafoOriginal. parentNode. replaceChild(nuevoDiv, p arrafoOriginal); console . log ( "Elemento reemplazado por:", nuevoDiv); </script> </body> </html> · Salida: El párrafo original es reemplazado por un div con el texto "Este es un div que reemplaza el párrafo."
Resumen de Métodos de Manipulación de Nodos
Resumen de Métodos
| Método | Acción | Descripción |
|---|---|---|
| document . createElement ( ) | Crear nodo | Crea un nuevo elemento HTML. |
| document . createTextNode () | Crear nodo de texto | Crea un nodo que contiene texto. |
| appendChild( ) | Añadir nodo | Agrega un nodo como hijo de otro nodo. |
| removeChild( ) | Eliminar nodo | Elimina un nodo hijo de su elemento padre. |
| replaceChild() | Reemplazar nodo | Reemplaza un nodo hijo por otro nodo. |
Mi DOM 10Estos ejemplos te permitirán comprender cómo crear, agregar, eliminar y reemplazar nodos de forma dinámica en el DOM. ¡ Practicalos para afianzar estos conceptos!
Acceso Directo a Atributos y Propiedades en el DOM
Acceso Directo a Atributos y Propiedades en el DOM El DOM permite manipular los atributos y propiedades de los elementos HTML, así como sus clases y estilos CSS. Aquí te explico cada concepto con ejemplos detallados.
Atributos HTML
1. Atributos HTML Descripción Los atributos son valores que están directamente definidos en las etiquetas HTML (como id, href , src , etc.). Puedes acceder a ellos o modificarlos con los métodos: . getAttribute() : Obtiene el valor de un atributo. . setAttribute() : Modifica o agrega un atributo.
Ejemplo de Atributos HTML
Ejemplo <! DOCTYPE html> <html> <head <title>Atributos HTML</title> </head> <body> <a id="enlace" href="https: //original. com">Enlace origi nal</a> <script> // Obtener el atributo "href"const enlace = document. getEle mentById("enlace"); console. log("Href original:", enlace. getAttribute ("href") ); / / Modificar el atributo "href" enlace. setAttribute( "href", "https://nuevo-enlace. c Mi DOM 11om"); console. log ("Href modificado:", enlace . getAttribute ("href") ); </script> </body> </html> · Salida: 1. Muestra el valor inicial del atributo href : "https://original. com" 2. Cambia el valor de href a "https: //nuevo-enlace. com"
Propiedades del DOM
2. Propiedades del DOM Descripción Las propiedades del DOM son representaciones dinámicas de los atributos HTML. Puedes acceder a ellas como si fueran propiedades de un objeto JavaScript.
Ejemplo de Propiedades del DOM
Ejemplo <! DOCTYPE html> <html> <head> <title>Propiedades DOM</title> </head> <body> <a id="enlace" href="https: //original. com">Enlace origi nal</a> <script> // Obtener y modificar propiedades directamenteconst enlace = document.getElementById("enlace"); console. log( "Href original:", enlace. href ) ; enlace.href = "https://nuevo-enlace.com"; console. log("Href modificado:", enlace. href ) ; </script> Mi DOM 12
¿Non has encontrado lo que buscabas?
Explora otros temas en la Algor library o crea directamente tus materiales con la IA.
