En JavaScript, el árbol DOM sigue la estructura jerárquica que contiene una gran lista de nodos. La estructura comienza desde el nodo raíz (Documento) y luego se agrega con los nodos principal y secundario. Para acceder a estos nodos secundarios, JavaScript ofrece el ' childNodes ' propiedad. Esta propiedad ayuda a los usuarios a acceder a todos o a un nodo secundario específico del elemento principal asociado.
Esta publicación explica el objetivo y el funcionamiento de la propiedad 'childNodes' del elemento HTML DOM en JavaScript.
¿Qué es la propiedad 'childNodes' del elemento HTML DOM en JavaScript?
El ' childNodes ” es una propiedad de solo lectura que devuelve la lista de todos los nodos secundarios de un elemento en forma de un objeto NodeList. Esta propiedad especial también se puede utilizar para acceder al nodo secundario específico del elemento principal. El nodo secundario comienza desde el índice '0 (cero)'. Además, los espacios en blanco, los comentarios y los nodos de texto también se consideran nodos secundarios.
Sintaxis
elemento.childNodes
La sintaxis generalizada anterior devuelve el objeto NodeList que contiene los nodos secundarios del elemento de destino.
Usemos las sintaxis definidas anteriormente de manera práctica.
código HTML
Primero, eche un vistazo al código HTML indicado:
< división identificación = 'división' estilo = 'borde: 2 px negro sólido; alto: 200 px; ancho: 250 px; relleno: 10 px' >< h2 > primer encabezado h2 >
< h3 > Segundo encabezado h3 >
< pag > Primer párrafo pag >
< pag > Segundo parrafo pag >
división >
< pag identificación = 'para' > pag >
En las líneas de código anteriores:
- Agrega un ' ” con un id “Div”, diseñado con la ayuda de las propiedades indicadas (borde, alto y ancho).
- Dentro del elemento “
”, defina dos encabezados y dos párrafos, respectivamente.- Por último, el “ La etiqueta ” incrusta un párrafo vacío con una identificación “para”.
Nota: El código HTML indicado se considera a lo largo de esta publicación.
Ejemplo 1: aplicar la propiedad 'childNodes' para obtener el número total de nodos secundarios de un elemento en particular
Este ejemplo utiliza las propiedades 'childNodes' y 'length' para obtener el número total de nodos secundarios presentes en el elemento principal específico.
Código JavaScript
Sigamos el código dado:
< guion >
const elemento = documento.getElementById ( 'división' ) ;
dejar num = elem.childNodes.longitud;
documento.getElementById ( 'para' ) .innerHTML = 'Valor: ' + número;
guion >En las líneas de código anteriores:
- La variable 'elem' utiliza el ' getElementById() ” para acceder al elemento padre cuyo id es “Div”.
- La variable 'num' utiliza el ' childNodes ' y ' longitud ” para obtener el número de nodos secundarios presentes en el elemento “” al que se accede.
- Por último, el método 'getElementById()' obtiene el párrafo vacío incrustado a través de su id 'para' para agregarle el valor de la variable 'num'.
Producción
La salida implica que hay un total “ 9 ” nodos secundarios en el elemento “
” dado, incluidos los espacios en blanco entre los elementos.Ejemplo 2: aplicar la propiedad 'childNodes' para obtener el nombre de un nodo secundario específico
La propiedad 'childNodes' también se puede utilizar con la propiedad 'nodeName' para obtener el nombre de los nodos secundarios. Veámoslo de forma práctica.
Código JavaScript
Ir a través del siguiente código:
< guion >
const elemento = documento.getElementById ( 'división' ) ;
dejar num = elem.childNodes [ 1 ] .nombre del nodo;
documento.getElementById ( 'para' ) .innerHTML = 'Elemento: ' +num;
guion >Aquí el ' childNodes La propiedad ” está vinculada con el “ nombre del nodo ” para obtener el nombre del nodo secundario especificado en función del índice accedido, es decir, “1”.
Producción
La salida muestra el nombre del nodo secundario, es decir, el elemento 'H2' contra el índice especificado.
Ejemplo 3: aplicar la propiedad 'childNodes' para cambiar el color del texto de un nodo secundario específico
Este ejemplo usa la propiedad discutida para cambiar el color del elemento secundario indexado de destino.
Código JavaScript
Considere el siguiente código:
< guion >
documento.getElementById ( 'división' ) .childNodes [ 3 ] .estilo.color = 'verde' ;
guion >Aquí el ' getElementById() ” obtiene el elemento principal “
” a través de su id “Div” y su nodo secundario colocado en el índice especificado a través del “ childNodes ” propiedad, respectivamente. Después de eso, use el ' estilo.color ” para cambiar el color del texto del nodo secundario al que se accede.Producción
El resultado confirma que el color del texto del nodo secundario especificado se ha cambiado correctamente.
Conclusión
En JavaScript, el “ childNodes ” recupera el objeto nodeList que contiene los nodos secundarios del elemento HTML de destino. Se puede acceder a los nodos secundarios todos a la vez o al deseado especificando el número de índice con la propiedad 'childNodes'. Esta propiedad permite la ejecución de la función de JavaScript para realizar tareas especiales en los nodos secundarios a los que se accede. Este artículo explicó cómo aplicar la propiedad 'childNodes' en JavaScript.
- Dentro del elemento “