Cómo acceder al elemento principal utilizando la propiedad HTML DOM parentElement

Como Acceder Al Elemento Principal Utilizando La Propiedad Html Dom Parentelement



Al agregar múltiples funcionalidades en el Modelo de objetos de documento (DOM) usando JavaScript, el desarrollador a menudo necesita analizar la asociación del elemento. Esto se puede lograr registrando el elemento principal de los elementos de destino, lo que agiliza el flujo de código y el formato de las funciones incluidas en el sitio.

Descripción general del contenido

¿Qué es la propiedad 'parentElement' en JavaScript?

El ' elementopadre La propiedad 'en JavaScript recupera el elemento que es el padre del elemento de destino.

¿Cómo acceder/invocar el elemento principal a través de la propiedad HTML DOM parentElement?

Se puede acceder al elemento principal mediante HTML DOM ' elementopadre ” propiedad con el “ nombre del nodo 'propiedad o recuperar el nodo del elemento padre en su lugar a través de' parentNode ' propiedad.





Sintaxis



nodo. elementopadre

Valor de retorno
Esta propiedad recupera un objeto de elemento que representa el nodo del elemento principal de un nodo y proporciona ' nulo ”si el nodo no incluye un padre.



Métodos y propiedades comunes utilizados

documento.querySelector() : este método obtiene el primer elemento que coincide con el selector CSS.



Sintaxis

documento. selector de consulta ( este )

En esta sintaxis, “ este ”se refiere a uno o más selectores de CSS.



documento.getElementById() : Devuelve el elemento que tiene la identificación especificada.

Sintaxis

documento. obtenerElementoPorId ( identificación )

Aquí, ' identificación 'indica la identificación del elemento de destino que se va a recuperar.

índice seleccionado : esta propiedad recupera el índice de la opción seleccionada de la lista desplegable. El “-1” La opción deselecciona todas las opciones.

nombre del nodo : esta propiedad recupera el nombre del nodo.

niños : Esta propiedad devuelve los elementos secundarios del elemento como una colección.

HTML externo : esta propiedad asigna o recupera el elemento HTML, así como sus atributos y etiquetas de inicio y fin.

parentNode : Esta propiedad en particular recupera el nodo padre de un elemento o nodo.

Nota : La diferencia entre “ elementopadre ' y ' parentNode 'La propiedad es que la propiedad anterior, es decir, 'parentElement' da ' nulo ”si el nodo padre no refleja un nodo de elemento.

Ejemplo 1: acceder al elemento principal a través de la propiedad 'parentElement' en JavaScript

Este ejemplo invoca el elemento principal de un elemento y muestra su nombre de nodo (principal) al hacer clic en el botón.

código HTML


< HTML >
< cuerpo >
< h1 > Propiedad parentElement en JavaScript < / h1 >
< h2 > Seleccione el idioma: < / h2 >
< seleccionar clase = 'elemento' >
< opción > Pitón < / opción >
< opción > Java < / opción >
< opción > javascript < / opción >
< / seleccionar >
< botón al hacer clic = 'displayParent()' clase = 'botón' > Mostrar el elemento principal del elemento 'opción' < / botón >
< div clase = 'temperatura' >< / div >< / cuerpo >
< HTML >

En este código:

  • Especifique lo dado “

    ” y “

    ” elementos que comprenden los encabezados de nivel uno y nivel dos, respectivamente.

  • Después de eso, cree un “” elemento representado por la clase dada que contiene los elementos secundarios adicionales, es decir, “” .
  • Ahora, crea un botón asociado con un ' al hacer clic ”evento que redirige al “mostrarpadre()” funcionar al hacer clic en el botón.
  • Por último, especifique el “
    ” elemento en el que se mostrará el resultado, es decir, el elemento principal al que se accede.

Código CSS

>
cuerpo {
        texto alineado : centro ;
        color : #fff ;
        color de fondo : gris ;
        altura : 100% ;
}
.botón {
        altura : 2rem ;
        radio-frontera : 2px ;
        ancho : 35% ;
        margen : 2rem auto ;
        mostrar : bloquear ;
        color : #ba0b0b ;
        cursor : puntero ;
}
.temperatura {
        tamaño de fuente : 1,5 rem ;
        peso de fuente : atrevido ;
}
>

En el código CSS anterior:

  • Diseñe la página web general con las propiedades aplicadas de “alineación de texto”, “color de fondo”, etc.
  • Asimismo, aplique el estilo al botón creado a través de su clase ajustando su altura, ancho, visualización, color, etc.
  • Finalmente, diseñe el “ div ”haciendo referencia a su nombre de clase en el que se mostrará el elemento principal al que se accede.

Código JavaScript



< guion >
    función mostrarpadre ( ) {
      era conseguir = documento. selector de consulta ( '.elemento' ) ;
      era este = conseguir . opciones [ conseguir . índice seleccionado ] ;
      era adjuntar = documento. selector de consulta ( '.temperatura' ) ;
adjuntar. HTML interno = 'El elemento principal del elemento de opción es -> ' + este. elementopadre . nombre del nodo ;
}
guion >

Según estas líneas de código:

  • Definir la función “mostrarpadre()” que accede al elemento “