Como consultar y/o modificar los atributos de un nodo web con jQuery

Como consultar y/o modificar los atributos de un nodo web con jQuery

Anteriormente hemos aprendido a consultar y modificar el html y el css de nodos web con jQuery.

En esta entrada veremos como consultar y modificar o insertar los atributos de las etiquetas.

Repasemos previamente que es un atributo.

Repaso. ¿Qué es un atributo?

Un atributo es cualquier información complementaria que acompaña a una etiqueta web.

Ejemplos de atributos web son:

href, alt, title, id, class, value, placeholder, name, style, …

Podéis consultar una lista completa en este enlace.

Enlace y atributos html
Enlace html y atributos que lo acompañan

Por ejemplo en la imagen anterior tenemos los atributos:

  • href, title, target, rel

La idea es que mediante javascript o jquery podemos bien consultar su valor o modificarlos a nuestro antojo.

Veamos como se hace.

Consultar el valor de los atributos de una etiqueta html

Dado el siguiente html:

<a href="/tutorial-html" class="enlace-1">soy el enlace 1</a>
<a href="/tutorial-css" class="enlace-2">soy el enlace 2</a>
<a href="/tutorial-javascript" class="enlace-3">soy el enlace 3</a>
<a href="/tutorial-jquery" class="enlace-4">soy el enlace 4</a>
<a href="/tutorial-wordpress" class="enlace-5">soy el enlace 5</a>
<a href="/tutorial-php" class="enlace-6">soy el enlace 6</a>

Y el siguiente jQuery:

var enlaces = $("a");
enlaces.css({
	"display":"inline-block",
	"border":"1px solid #000",
	"padding":"10px"
});

Como se hace en jQuery

Veamos el resultado por la consola del navegador de la siguiente expresión:

//JQuery
//preguntar el valor del atributo href del nodo que ocupa la tercera posición.
enlaces.eq(2).attr("href");
Resultado en jquery instrucción attr
Resultado en jquery instrucción attr

Como se haría en Javascript partiendo de $

Veamos el resultado por la consola del navegador de la siguiente expresión:

//En JS

enlaces[1].href
enlaces[2].href

//En JQ
enlaces.eq(1).attr("href")
enlaces.eq(2).attr("href")
Resultado en javascript instrucción attr
Resultado en javascript instrucción attr

Fijaros que la información que obtenemos es muy parecida en javascript y en jquery aunque ligeramente distinta.

Modificar el valor de los atributos

Para modificar el valor del atributo de un nodo la nomenclatura cambia un poco.

Se pueden dar dos casos:

  • Que deseemos modificar una única propiedad por instrucción.
  • Que modifiquemos varios atributos a la vez.

Es muy similar a cuando queríamos modificar con jquery el css de cualquier etiqueta web.

Como se hace en jQuery

Para modificar propiedades de una en una escribiremos:

//de una en una
enlaces.attr("href","https://google.es");
enlaces.attr("target","_self");
enlaces.attr("title","te redirigirá a google");

Para modificar todas a la vez escribiremos:

//varias a la vez
enlaces.css({
	"href":"inline-block",
	"target":"_self",
	"title":"te redirigirá a google"
});

Fijaros que en el caso de todo los atributos a la vez en una única instrucción se usa la nomenclatura de una variable de tipo objeto y que todos los campos son de tipo string.

Muy importante, las informaciones separan con coma (,) excepto el último (title).

Usando a $ pero instrucciones de Javascript

jQuery nos permite modificar todos los enlaces de golpe.

Sin embargo en javascript debíamos ir de enlace en enlace

for (var i = 0; i < enlaces.length; i++) {
	enlaces[i].href= "https://google.es";
	enlaces[i].target = "_self";
	enlaces[i].title = "te redirigirá a google";
}

A mi modo de ver un ejemplo poco práctico pero útil académicamente.

Para modificar un nodo concreto bastaría con intermediar la instrucción.eq(2) para el enlace 3 como ejemplo.

jQuery permite ahorrar muchas líneas de código y complejidad.

Sin embargo, una vez más incidir en que aprender javascript es imprescindible.

Resistir la tentación de usar jQuery si todavía no domináis como se escribe en Javascript puro.

Modificar o consultar el valor de un input en un formulario web

Un input no deja de ser un atributo más.

Aplica exactamente todo lo aprendido anteriormente.

El atributo que contiene el valor de un input es value.

Dado el siguiente html:

<input type="text" value="francesc" name="nombre">

Podríamos usar la misma estrategia para consultar el valor del atributo value y/o modificarlo.

Sin embargo existe otra instrucción .val() más apropiada y sobre la que hablaremos en una futura publicación.

La diferencia entre .val() y .attr() la podéis encontrar en este hilo de stackoverflow.

¡Hola!

Querido lector,

Deseo que esta publicación te resulte de utilidad para no liarte entre javascript y jquery.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.