Obtenga el atributo de un nodo principal usando JavaScript

Mientras se trata de códigos complejos, a menudo hay un requisito para acceder a los atributos de un nodo principal en particular contra múltiples nodos infantiles para aplicar sus funcionalidades. En tal caso, utilizar los atributos establecidos se vuelve conveniente en lugar de asignarlos repetidamente. Además, obtener el atributo de un nodo principal utilizando las asistencias de JavaScript para hacer que el acceso sea factible y utilizar los atributos asignados de manera efectiva.

Este tutorial discutirá los enfoques para obtener el atributo de un nodo principal usando JavaScript.

Cómo obtener el atributo de un nodo principal usando JavaScript?

El atributo del nodo principal se puede obtener en JavaScript utilizando los siguientes enfoques:

• "sargento"Propiedad con el"getAttribute ()" método.
• "más cercano ()" y "getAttribute ()" métodos.
• "jQuery" métodos.

Enfoque 1: Obtenga el atributo de un nodo principal en JavaScript utilizando la propiedad de matriz con el método getAttribute ()

El "sargento"La propiedad proporciona el elemento principal del elemento asociado. Mientras que el "getAttribute ()"El método devuelve el valor del atributo de un elemento. Estos métodos se pueden aplicar en combinación para acceder al nodo infantil y obtener el atributo particular del nodo principal refiriéndose al nodo infantil.

Sintaxis

elemento.getAttribute (nombre)

En la sintaxis dada anteriormente:

"nombre"Señala el nombre del atributo.

Ejemplo
Vamos a ver el siguiente ejemplo:

Este es el sitio web de Linuxhint

En el fragmento de código anterior:

• En primer lugar, incluya el ""Elemento tiene el declarado"identificación"Que será considerado como el"padre"Nodo.
• En el siguiente paso, especifique el "

  "Elemento tiene el especificado"identificación", Que será tratado como el"niño"Nodo.

• En el código JS, acceda al nodo infantil por su "identificación" mediante el "getElementById ()" método.
• Después de eso, asocie el "sargento"Propiedad y la"getAttribute ()"Métodos para el nodo infantil recuperado.
• Esto dará como resultado obtener el atributo especificado del nodo principal referiéndose al nodo infantil.

Producción

En la salida anterior, se puede observar que al referirse a la "ID" del nodo principal, se muestra el atributo de conjunto correspondiente.

Enfoque 2: Obtenga el atributo de un nodo principal en JavaScript usando los métodos CloseSt () y getAttribute ()

El "más cercano ()El método busca los elementos en un árbol DOM que coincide con un selector CSS específico. Este método se puede implementar en combinación con el "getAttribute ()Método para buscar el elemento más cercano al elemento infantil particular y obtener su atributo (nodo principal).

Sintaxis

elemento.más cercano (selectores)

En la sintaxis anterior:

"selectores"Corresponde a uno o más de un selectores CSS.

Ejemplo
Pasemos por el siguiente ejemplo:

Esta es una imagen

Aplique los siguientes pasos que se dan en las líneas de código anteriores:

• Del mismo modo, incluya el nodo principal y dos nodos infantiles que tienen el declarado "IDS", Respectivamente.
• En el código de JavaScript, acceda a los nodos infantiles, como se discutió, utilizando el "getElementById ()" método.
• En el siguiente paso, aplique el "más cercano ()"Método que se refiere al"identificación"Del elemento principal. Esto dará como resultado acceder al elemento más cercano que tiene la identificación indicada.
• Además, aplique el "getAttribute ()"Método para obtener el especificado"atributo"Del elemento principal al que se accede en el paso anterior.
• Por último, muestre el atributo del nodo principal correspondiente.

Producción

De la salida anterior, se puede ver que el atributo del nodo principal "estilo"Es recogido.

Enfoque 3: Obtenga el atributo de un nodo principal en JavaScript utilizando métodos jQuery

Este enfoque se puede aplicar para acceder al nodo infantil directamente y acceder al atributo del nodo principal refiriéndose a él a través de métodos separados.

Ejemplo
El siguiente ejemplo ilustra el concepto declarado:

En el código anterior:

• Incluir la "jQueryBiblioteca para aplicar sus métodos.
• Después de eso, especifique el nodo padre e hijos del mismo modo. La entrada "texto"El campo aquí actuará como el"niño"Nodo.
• En el código JS, acceda al elemento infantil, yo.mi., campo de texto de entrada. El "padre()" y el "attr ()Los métodos ubicarán el atributo especificado en el elemento principal y lo mostrarán a través de una alerta.

Producción

La salida anterior significa que se logra el requisito deseado.

Conclusión

La propiedad de ParentElement con el método getAttribute () puede redirigir al nodo principal y obtener su atributo particular. Los métodos Closer () y getAttribute () pueden obtener el elemento más cercano con respecto al elemento infantil asociado y obtener su atributo. Mientras que los métodos jQuery pueden acceder al nodo infantil directamente y usar métodos separados para que cada función realice el requisito deseado. Este blog explica cómo obtener el atributo de un nodo principal en JavaScript.