Desarrollo de Entornos

Web
Unidad 4: Manejo de Arreglos
Tema 6: ChildNodes
4.2. Tema 6: ChildNodes

2
Índice
4.2 Tema 6: ChildNodes
4.2.1 Trabajando con ChildNodes
4.2.2 Métodos para acceder a nodos hijos
4.2.3 Métodos para agregar o quitar nodos

3
Capacidades
• Diseña y programa páginas web para un sitio web utilizando etiquetas HTML y lenguaje de programación
JavaScript.

4
Introducción
• En este capítulo aprenderemos a programar en una página HTML, utilizando JavaScript, donde accederemos,
agregamos o quitamos elementos dentro de la página HTML, cuando el navegador está ejecutándola.

5
4.2 ChildNodes

6
4.2.1 Trabajando con ChildNodes

• Representa una colección de todos los nodos que

son descendientes directos de un elemento.
• Los nodos de la colección se ordenan en orden de
código fuente.
• La colección ChildNodes contiene todos los nodos
descendientes directos incluyendo nodos de
texto y nodos de comentario .

7
4.2.2 Métodos para acceder a nodos hijos
Palabra Clave Significado
parentNode Nodo padre de un nodo
childNodes Arreglo conteniendo los hijos de un nodo
firstChild Primer hijo de un nodo (por la izquierda)
lastChild Ultimo hijo de un nodo
nextSibling Próximo nodo hermano
previosSibling Anterior nodo hermano

8
4.2.3 Métodos para agregar o quitar nodos
Palabra Clave Significado
appendChild(node) Añade un nodo como último nodo hijo
removeChild(node) Quita un nodo especificado.
hasChildNodes() Retorna true si el nodo especificado tiene nodos secundarios.
createElement() Crea un nodo de elemento con el nombre especificado.
createTextNode() Crea un nodo texto con el nombre especificado

9
Ejercicio
• Se pide programar una página HTML con JavaScript para
acceder, agregar y quitar nodos durante la ejecución de la
página en un navegador.

10
Conclusiones
• Representa una colección de todos los nodos que son descendientes directos de un elemento.
• Los nodos de la colección se ordenan en orden de código fuente.
• La colección ChildNodes contiene todos los nodos descendientes directos incluyendo nodos de texto y nodos de
comentario .
• Posee métodos para acceder, agregar y quitar nodos hijos.

11
Referencias bibliográficas
• Álvarez García, Alonso (2019) Manual Imprescindible: HTML 5.2. Madrid: Anaya Multimedia.
Centro de Información: Código 006.74HTML ALVA/M
• Gauchat, J. D. (2019) El gran libro de HTML5, CSS3 y JavaScript. 3a ed. Marcombo. Recuperado de
https://elevaciondigital.pe/wp-content/uploads/2019/06/El-gran-libro-de-HTML5-CSS3-y-JavaScript.pdf
• Meloni, Julie C. (2015) Html5, CSS3 y JavaScript. Madrid: Anaya Multimedia.
Centro de Información: Código 006.74HTML MELO 2016
• Rubiales Gómez, Mario (2018) Curso de desarrollo web: HTML, CSS y JavaScript. Madrid: Anaya Multimedia.
Centro de información: 006.74HTML RUBI/C
• Desarrollo Web (s.f.) Manual de React JS. Recuperado de https://desarrolloweb.com/manuales/manual-de-
react.html

12
 GRACIAS

SEDE MIRAFLORES SEDE INDEPENDENCIA SEDE BREÑA SEDE TRUJILLO

Calle Diez Canseco Cdra. 2 / Pasaje Tello Av. Carlos Izaguirre 233 Av. Brasil 714 – 792 Calle Borgoño 361
Miraflores – Lima Independencia – Lima (CC La Rambla – Piso 3) Trujillo
Teléfono: 633-5555 Teléfono: 633-5555 Breña – Lima Teléfono: (044) 60-2000
Teléfono: 633-5555

SEDE SAN JUAN DE LURIGANCHO SEDE LIMA CENTRO SEDE BELLAVISTA SEDE AREQUIPA
Av. Próceres de la Independencia 3023-3043 Av. Uruguay 514 Av. Mariscal Oscar R. Benavides 3866 – 4070 Av. Porongoche 500
San Juan de Lurigancho – Lima Cercado – Lima (CC Mall Aventura Plaza) (CC Mall Aventura Plaza)
Teléfono: 633-5555 Teléfono: 419-2900 Bellavista – Callao Paucarpata - Arequipa
Teléfono: 633-5555 Teléfono: (054) 60-3535

www.cibertec.edu.pe