Añadiendo un atributo javascript. Manipular atributos de elementos en jQuery

La lección cubrirá el comienzo del tema: el modelo de objeto de documento (javaScript DOM) es la base del HTML dinámico, se estudiarán los métodos para acceder a los objetos y cómo manejar los eventos de JavaScript.

• Generalmente un objeto Es un tipo de datos compuestos que combina muchos valores en un módulo común y le permite almacenar y recuperar valores bajo demanda por sus nombres.

Anteriormente, ya comenzamos a familiarizarnos con el concepto en javascript.

• En javascript existe algo llamado DOM - Modelo de objetos de documento- el modelo de objeto de la página web (páginas html).
• Las etiquetas de documento o, como se suele decir, los nodos de documento son sus objetos.

Veamos el diagrama jerarquía de objetos en JavaScript y en qué parte de la jerarquía se encuentra el objeto de documento que se analiza en este tema.

El elemento de secuencia de comandos tiene atributos:

aplazar (esperando a que la página se cargue por completo).

Ejemplo:

Propiedades y atributos del objeto de documento en javaScript

El objeto de documento representa una página web.

Importante: Para acceder a las propiedades y métodos de un objeto en javaScript, como con otros objetos, se utiliza notación de puntos:

aquellos. primero se escribe el objeto en sí, luego se indica su propiedad, atributo o método mediante un punto y sin espacios

object.property object.attribute object.method ()

Consideremos un ejemplo:

Ejemplo: deja que el documento html tenga una etiqueta

y el estilo CSS definido para él (incluso dos estilos, el segundo es útil para la tarea):

Necesario:

1. establecer una nueva propiedad del objeto, asignarle un valor y mostrar este valor;
2. mostrar el valor de un atributo de un objeto;
3. cambiar el valor de un atributo de un objeto.

Completemos la tarea en orden:
✍ Solución:

Dado que se trata de un lenguaje javascript, se puede inventar un objeto y establecer cualquier propiedad con cualquier valor. Pero primero, obtengamos acceso al objeto (el acceso al objeto se discutirá en detalle más adelante en esta lección):

// obtener acceso al objeto por su id var element = document.getElementById ("MyElem"); element.myProperty = 5; // asignar alerta de propiedad (element.myProperty); // mostrar en el cuadro de diálogo

La siguiente tarea está relacionada con un atributo de un objeto. Atributo de objeto Son los atributos de la etiqueta. Aquellos. en nuestro caso hay dos: el atributo de clase con un valor pequeño y el atributo id. Trabajaremos con el atributo de clase.

Ahora agreguemos código javascript para mostrar el valor del atributo de nuestro objeto. El código debe estar ubicado después etiquetas principales:

// obtener acceso al objeto por su id var element = document.getElementById ("MyElem"); alert (element.getAttribute ("clase")); // mostrar en el cuadro de diálogo

Y la última tarea: cambiar el valor del atributo. Para ello hemos preparado un estilo "Grande"... Reemplacemos el valor del atributo de clase con este estilo:

// obtener acceso al objeto por su id var element = document.getElementById ("MyElem"); element.setAttribute ("clase", "grande");

Como resultado, nuestro elemento se volverá más grande y de color azul (clase grande).

Ahora echemos un vistazo más de cerca a los métodos usados ​​en el ejemplo para trabajar con atributos.

Métodos de atributos en JavaScript

Los atributos se pueden agregar, eliminar y cambiar. Hay métodos especiales para esto:

• Añadiendo un atributo (estableciendo un nuevo valor para él):

getAttribute (atributo)

• Comprobación de la presencia de un atributo determinado:

removeAttribute (atributo)

Diferentes formas de trabajar con atributos

Ejemplo: Imprime el valor del atributo de valor del bloque de texto.

✍ Solución:

• Tengamos un bloque de texto:

var elem = document.getElementById ("MyElem"); var x = "valor";

• Veamos varias formas de obtener el valor de un atributo (use el método alert () para la salida):

elem.getAttribute ("valor")

elem.getAttribute ("valor")

2.notación de puntos:

elem.attributes .value

elem.attributes.value

3.notación entre corchetes:


Establecer valores de atributo también de varias formas:

var x = "clave"; // clave - nombre del atributo, val - valor del atributo // 1. elem.setAttribute ("clave", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes [ "clave"] = "val" // 4. elem.setAttribute (x, "val")

Propiedades de los elementos corporales

A través del objeto de documento, puede hacer referencia al cuerpo del documento, la etiqueta del cuerpo, con algunas de sus propiedades útiles.

Por ejemplo, la etiqueta del cuerpo tiene dos propiedades: ancho y alto de la ventana del cliente:

document.body.clientHeight - la altura de la ventana del cliente
document.body.clientWidth - ancho de la ventana del cliente


Pero lo más importante, como ya hemos aprendido, es que a través del objeto documento, mediante métodos especiales, se realiza el acceso a todos los elementos de la página, es decir, etiquetas.

Importante: Con este tipo de referencia a las etiquetas de página, el script debe estar al final del árbol de elementos, ¡antes de cerrar el cuerpo! Dado que en el momento en que se ejecuta el script, el navegador ya debe "dibujar" todos los elementos en la pantalla.

Trabajo js8_1... Mostrar un mensaje sobre el tamaño de la ventana del navegador: por ejemplo, "Tamaño de la ventana del navegador 600 x 400"

Accediendo a los elementos del documento en javaScript

Hay varias opciones para acceder a objetos o buscar objetos:

1. Buscar por id(o el método getElementById), devuelve un elemento específico
2. Buscar por nombre de etiqueta(o el método getElementsByTagName), devuelve una matriz de elementos
3. Buscar por atributo de nombre(o el método getElementsByName), devuelve una matriz de elementos
4. A través de elementos padres(obtener todos los descendientes)

Consideremos cada una de las opciones con más detalle.

1. Accediendo a un elemento a través de su atributo id

Sintaxis: document.getElementById (id)

El método getElementById () devuelve el elemento en sí, que luego se puede usar para acceder a los datos

Ejemplo: La página tiene un campo de texto con un atributo id = "cake":

...

Necesario



✍ Solución:

alert (document.getElementById ("pastel"). valor); // devuelve "número de pasteles"

Puede hacer lo mismo implementando una llamada de objeto a través de una variable:

var a = document.getElementById ("pastel"); alerta (un.valor); // imprime el valor del atributo de valor, es decir texto "número de tortas"

Importante:¡El guión debe colocarse después de la etiqueta!

Acceder a una matriz de elementos a través del nombre del nombre de la etiqueta y a través del índice de la matriz

Sintaxis:
document.getElementsByTagName (nombre);

Ejemplo: La página tiene un campo de texto (etiqueta de entrada) con un atributo de valor:

...

Necesario: imprime el valor de su atributo de valor

El método getElementsByTagName a través de una variable organiza el acceso a todos los elementos de entrada (es decir, a una matriz de elementos input), incluso si este elemento es el único en la página. Para referirnos a un elemento específico, por ejemplo al primero, luego indicamos su índice (el arreglo comienza desde el índice cero).

✍ Solución:

Refiriéndose a un elemento específico por índice:

var a = document.getElementsByTagName ("entrada"); alerta (un.valor); // devuelve "número de pasteles"

Accediendo a una matriz de elementos por el valor del atributo de nombre

Sintaxis:
document.getElementsByName (nombre);

El método getElementsByName ("...") devuelve matriz de objetos, en el que el atributo de nombre es igual al valor especificado como parámetro de método. Si solo hay uno de esos elementos en la página, el método aún devuelve una matriz (con un solo elemento).

Ejemplo: digamos que hay un elemento en el documento:

var element = document.getElementsByName ("MyElem"); alerta (elemento.valor);

En este ejemplo, solo hay un elemento, pero la referencia se hace al elemento cero de la matriz.

Importante: El método funciona solo con aquellos elementos para los que el atributo de nombre se proporciona explícitamente en la especificación.: estas son las etiquetas form, input, a, select, textarea y algunas otras, más raras.

El método document.getElementsByName no funcionará con otros elementos como divs, p, etc.

Accediendo a los descendientes del elemento padre

Accediendo a descendientes en javascript sucede a través de la propiedad childNodes. La propiedad pertenece al objeto padre.

document.getElementById (roditel) .childNodes;

document.getElementById (roditel) .childNodes;

Considere un ejemplo en el que las etiquetas de imagen se colocan en un contenedor: una etiqueta div. Por lo tanto, la etiqueta div es el padre de los datos de la imagen, y las etiquetas img en sí mismas, respectivamente, son hijos de la etiqueta div:

<div id = "div_for_img"> <img src = "pic1.jpg" /> <img src = "pic2.jpg" /> <img src = "pic3.jpg" /> <img src = "pic4.jpg" /> </ div>

Ahora mostremos los valores de los elementos de la matriz con descendientes en la ventana modal, es decir, etiquetas img:

var myDiv = document.getElementById ("div_for_img"); // hace referencia al contenedor padre var childMas = myDiv.childNodes; // matriz de descendientes para (var i = 0; i< childMas.length;i++){ alert(childMas[i].src); }

Tenga en cuenta que es conveniente utilizar un bucle para iterar sobre los elementos de la matriz descendiente. Aquellos. en nuestro ejemplo obtenemos un bucle:

... para (var a en childMas) (alert (childMas [a] .src);)

Para (var a en childMas) (alert (childMas [a] .src);)

Otras formas de referirse a elementos

Otras formas que consideraremos Por ejemplo:

<cuerpo> <formulario nombre = "f"> <tipo de entrada = "texto" id = "t"> <tipo de entrada = "botón" id = "b" valor = "(! LANG: botón" > !} <seleccione id = "s" nombre = "ss"> <id de opción = "o1"> 1</ opción> <id de opción = "o2"> 3</ opción> <id de opción = "o3"> 4</ opción> </ seleccionar> </ formulario>

1 3 4

Acceso:

... // accesos de elementos obsoletos y no deseados: alerta (document.forms [0] .name); // f alerta (document.forms [0] .elements [0] .type); // alerta de texto (document.forms [0] .elements [2] .options [1] .id); // alerta o2 (document.f .b .type); // alerta de botón (document.f .s .name); // alerta ss (document.f .s .options [1] .id); // o2 // métodos de acceso preferidos para elementos alert (document.getElementById ("t") .type); // alerta de texto (document.getElementById ("s") .name); // alerta ss (document.getElementById ("s") .options [1] .id); // 02 alerta (document.getElementById ("o3") .text); // 4 ...

... // accesores de elementos obsoletos y no deseados: alert (document.forms.name); // f alerta (document.forms.elements.type); // alerta de texto (document.forms.elements.options.id); // alerta o2 (document.f.b.type); // alerta de botón (document.f.s.name); // alerta ss (document.f.s.options.id); // o2 // métodos de acceso preferidos para los elementos alert (document.getElementById ("t"). type); // alerta de texto (document.getElementById ("s"). nombre); // alerta ss (document.getElementById ("s"). options.id); // 02 alerta (document.getElementById ("o3"). Texto); // 4 ...

Ejemplo: En documento html crear botón y cuadro de texto. Usar un script para colorear el fondo del botón (la propiedad style.backgroundColor del botón) y mostrar el título "¡Oye!" en el cuadro de texto (valor tributo).

Código HTML:

document.getElementById ("t1"). value = "(! LANG: ¡Hola!"; document.getElementById("b1").style.backgroundColor = "red";!}

Opcion 2:

document.getElementById ("t1") .setAttribute ("valor", "¡Hola!"); document.getElementById ("b1") .style .backgroundColor = "rojo";

document.getElementById ("t1"). setAttribute ("valor", "¡Hola!"); document.getElementById ("b1"). style.backgroundColor = "rojo";

Js8_2. Cree etiquetas de cuadro de texto de acuerdo con la imagen de la imagen. Configúrelos en los valores de atributo id correspondientes (que se muestran en la figura). Agregue el valor "0" a todos los campos numéricos (asumiendo valores numéricos) usando el script

Verificar que los datos del formulario se ingresen correctamente

¿El campo está vacío?

No se puede confiar en los datos ingresados ​​por los usuarios. No es razonable suponer que los usuarios verificarán los datos a medida que los ingresan. Esto significa que necesita usar javascript para esto.

Para comprobar ¿Está vacío el cuadro de texto?(por ejemplo, después de que el usuario haya completado los datos de cualquier cuestionario), debe consultar la propiedad de valor. Si el valor de la propiedad es una cadena vacía (""), entonces es necesario notificar de alguna manera al usuario sobre esto.

if (document.getElementById ("nombre"). valor == "") (algunas acciones, por ejemplo, mostrar un mensaje que le pide que complete el campo);

Además, puede prescindir de un script. La etiqueta de entrada del cuadro de texto tiene un atributo de patrón. su valor es una expresión regular para validar datos en este campo de texto del formulario. Si el atributo está presente patrón entonces el formulario no se enviará hasta que este cuadro de texto se complete correctamente.
Por ejemplo, para comprobar si un campo se deja vacío:

Texto en lugar de valor numérico: función isNaN

Si el campo sugiere entrada numérica, y en su lugar el usuario ingresa texto, entonces debe usar la función isNaN (del inglés. "¿No es un número?"), que verifica el tipo de datos de entrada y devuelve verdadero si se ingresan datos de texto en lugar de datos numéricos.

Ese. si se devuelve verdadero, entonces es necesario notificar al usuario que ingrese el formato correcto, es decir número.

if (isNaN (document.getElementById ("minutos"). valor)) (alerta que solicita datos numéricos);

Dada una página con elementos para llenar:


Fragmento de código html:

1 2 3 4 5 6 7 8 9 10 11 12

<formulario> Nombre:<tipo de entrada = "texto" id = "nombre"> Número de donas:<tipo de entrada = "texto" id = "donas"> Minutos:<tipo de entrada = "texto" id = "minutos"> Total parcial:<tipo de entrada = "texto" id = "poditog"> Impuesto:<tipo de entrada = "texto" id = "impuestos"> Salir:<tipo de entrada = "texto" id = "itog"> <tipo de entrada = "enviar" valor = "(! LANG: orden" onclick = "placeOrder();" > !} </ formulario> <tipo de script = "texto / javascript"> ... </ script>

Nombre:
Número de donas:
Minutos:
Total parcial:
Impuesto:
Salir:

Necesario:
Complete los espacios en blanco en el fragmento de código a continuación que verifica que los dos campos de texto estén completados correctamente: nombre(id = "nombre") y minutos(id = "minutos"). Utilice la marca de verificación para dejar el campo vacío ("") y el formato correcto para completar un campo numérico (isNaN).

* Realice la tarea también usando el atributo de patrón de los campos de texto usando.

Fragmento del guión:

El código se usa para construir condiciones complejas pasadas anteriormente.

Un nuevo concepto para usted es llamar a una función como controlador para un evento de botón:
onclick = "placeOrder ();"
Cuando se hace clic en el botón, se llamará a la función placeOrder ()

Puede crear una encuadernación personalizada fijaciones, que verificará el valor de un booleano observable específico antes de agregar o no atributos. Vea este ejemplo:

Ko.bindingHandlers.attrIf = (actualización: función (elemento, valueAccessor, allBindingsAccessor) (var h = ko.utils.unwrapObservable (valueAccessor ()); var show = ko.utils.unwrapObservable (h._if); if (show) (ko.bindingHandlers.attr.update (element, valueAccessor, allBindingsAccessor);) else (for (var k in h) (if (h.hasOwnProperty (k) && k.indexOf ("_")! == 0) ( $ (elemento) .removeAttr (k);))))); Enlace

Ojalá pudiera responder a @gbs, pero no puedo. Mi solución sería tener dos elementos HTML idénticos, uno con un atributo, otro sin, y una condición de eliminación para agregar uno de ellos para que coincida con el elemento. También soy consciente de esta expectativa habitual, pero ¿qué solución es más eficiente?

Este tutorial trata sobre la lectura y modificación de atributos de elementos en jQuery.

Los atributos son un par de nombre / valor que se asigna a los elementos de una etiqueta. Ejemplos de atributos ( href, título, src, clase):

• attr () para leer, agregar y cambiar atributos
• removeAttr () para eliminar atributos

Esta lección explica cómo trabajar con los métodos attr () y removeAttr ().

Hay métodos especiales de jQuery para trabajar con clases CSS, que se describen en otro tutorial. Cuando trabajas en un proyecto en jQuery, tienes que manipular las clases CSS con mucha frecuencia, y el atributo de clase puede contener varios nombres de clase, lo que hace que sea mucho más difícil trabajar con él que con otros atributos.

Si va a trabajar con los valores de los campos de entrada, entonces es mejor usar el método val (), que no solo proporciona una forma simplificada de trabajar con el atributo de valor, sino que también puede leer y establecer valores. en los elementos seleccionados de la lista de selección.

Leer el valor del atributo

Leer el valor del atributo de un elemento es sencillo. Solo necesita llamar al método attr () en el objeto jQuery que contiene el elemento, pasándole el nombre del atributo a leer. El método devuelve el valor del atributo:

// Muestra el valor del atributo "href" del elemento #myLink alert ($ ("a # myLink"). Attr ("href"));

Si su objeto jQuery contiene varios elementos, el método attr () solo lee los valores de atributo del primer elemento del conjunto.

Establecer valores de atributo

El método attr () también se puede usar para agregar o cambiar valores de atributos:

• Si el atributo no existe en el elemento, será adicional y se le asignará el valor dado.
• Si el atributo ya existe, su valor será actualizado valor específico.

Hay tres formas de usar el método attr () para agregar o cambiar atributos:

1. Puede agregar / cambiar atributos para cualquier elemento (o conjunto de elementos).
2. Puede agregar / cambiar varios atributos a la vez para un elemento (o elementos) especificando un mapa de nombres y valores de atributos.
3. puede agregar / cambiar dinámicamente un solo atributo para múltiples elementos usando una función de devolución de llamada.

Establecer un atributo

Para establecer o cambiar un atributo de un elemento, llame al método attr () con el nombre y el valor del atributo. Por ejemplo:

// Cambie el valor del atributo "href" del elemento #myLink a "http://www.example.com/" // (si el atributo "href" no existe, se creará automáticamente) $ ( "a # myLink"). attr ("href", "http://www.example.com/");

También es posible establecer el mismo atributo para varios elementos:

Establecer algunos atributos usando un mapa

Puede establecer varios atributos al mismo tiempo para uno o más elementos usando un mapa. Esta es una lista de pares de nombre / valor que se ve así:

(nombre1: valor1, nombre2: valor2, ...)

El siguiente ejemplo establece dos atributos para el elemento img al mismo tiempo:

// Establece los atributos "src" y "alt" para el elemento img #myPhoto $ ("img # myPhoto"). Attr (("src": "mypic.jpg", "alt": "Mi foto")) ;

También puede establecer atributos para varios elementos:

// Establecer los atributos "src" y "alt" para todos los elementos img $ ("img"). Attr (("src": "mypic.jpg", "alt": "Mi foto"));

Establecer atributos mediante una función de devolución de llamada

En lugar de pasar valores de atributo al método attr (), puede pasar el nombre de la función de devolución de llamada. Esto le permite establecer dinámicamente valores de atributo para varios elementos según la posición del elemento, el valor de atributo existente u otras propiedades.

La función de retorno debe tener dos argumentos:

• El índice de la posición del elemento seleccionado actualmente en el conjunto (comenzando en cero)
• el antiguo valor de atributo para el elemento seleccionado actualmente

El valor de retorno de la función se usa para anular el valor del atributo.

Además de la posición actual del elemento y el valor anterior del atributo, su función puede acceder al elemento en sí usando la palabra clave this. De esta forma, puede acceder a cualquier propiedad o método de un elemento desde una función de devolución de llamada.

El ejemplo usa una función de devolución de llamada para agregar un atributo alt a cada imagen en la página según la posición de la imagen y su atributo src:

Después de ejecutar el código, la primera imagen tendrá un atributo alt con el valor "Figura 1: myphoto.jpg", y la segunda imagen tendrá un atributo alt con el valor "Figura 2: yourphoto.jpg".

Eliminar un atributo

Para eliminar un atributo de un elemento, llame al método removeAttr (), pasándole el nombre del atributo a eliminar. Por ejemplo:

// Elimina el atributo "title" del elemento #myLink $ ("a # myLink"). RemoveAttr ("title");

También puede llamar al método removeAttr () en un objeto jQuery que contiene varios elementos. El método removeAttr () eliminará el atributo dado de todos los elementos:

// Elimina el atributo "title" de todos los enlaces $ ("a"). RemoveAttr ("title");

Resumen

Esta lección cubrió los problemas de trabajar con atributos de elementos en jQuery:

• Lectura de valores de atributos
• Establecer un atributo
• Establecer varios atributos diferentes al mismo tiempo
• Usar una función de devolución de llamada para establecer dinámicamente valores de atributo en una plantilla
• Eliminar atributos de un elemento

En este artículo, nos familiarizaremos con las propiedades y atributos del DOM, consideraremos en qué se diferencian y cómo trabajar con ellos correctamente. Echemos un vistazo a los métodos de JavaScript para realizar operaciones en atributos.

¿En qué se diferencia un atributo de una propiedad DOM?

Los atributos son entidades HTML con las que podemos agregar datos específicos a elementos en código HTML.

Cuando el navegador solicita una página, recibe su código fuente HTML. Después de eso, analiza este código y crea el DOM basándose en él. Durante este proceso Los atributos HTML de los elementos se traducen en las propiedades DOM correspondientes..

Por ejemplo, un navegador, al leer la siguiente línea de código HTML, creará las siguientes propiedades DOM para este elemento: id, className, src y alt.

Se accede a estas propiedades en código JavaScript como propiedades de un objeto. El objeto aquí es el nodo DOM (elemento).

Un ejemplo en el que obtenemos los valores de las propiedades DOM para el elemento anterior e imprimimos sus valores en la consola:

// obtener el elemento var brandImg = document.querySelector ("# brand"); // imprime en la consola los valores de las propiedades DOM del elemento console.log (brandImg.id); // "marca" console.log (brandImg.className); // "marca" console.log (brandImg.src); // "/logo.png" console.log (brandImg.alt); // "logotipo del sitio"

Algunos nombres de propiedades DOM no coinciden con los nombres de los atributos. Uno de ellos es el atributo de clase. Este atributo corresponde a la propiedad DOM className. Esta diferencia se debe al hecho de que class es una palabra clave en JavaScript, está reservada y no se puede utilizar. Debido a esto, los desarrolladores del estándar decidieron usar otro nombre para la coincidencia, que fue elegido como className.

Otro matiz está relacionado con el hecho de que la traducción de los atributos HTML especificados en el código fuente del documento en propiedades DOM no siempre se realiza uno a uno.

Si un elemento tiene un atributo HTML no estándar, no se crea la propiedad correspondiente en el DOM.

Otra diferencia es que los valores de ciertos atributos HTML y sus correspondientes propiedades DOM pueden ser diferentes. Aquellos. un atributo puede tener un valor, pero una propiedad DOM creada a partir de él puede tener otro.

Uno de estos atributos está marcado.

El valor del atributo HTML verificado, en este caso, es una cadena vacía. Pero, la propiedad correspondiente al atributo dado en el DOM tendrá el valor verdadero. Porque de acuerdo con las reglas del estándar, para establecer true, basta con mencionar este atributo en el código HTML, y no importa el valor que tenga.

Al mismo tiempo, incluso si no especificamos el atributo marcado para el elemento de entrada con el tipo de casilla de verificación en el código HTML, la propiedad marcada aún se creará en el DOM para él, pero será igual a falso.

Además, JavaScript también le permite trabajar con atributos. Hay métodos especiales para esto en la API DOM. Pero es recomendable usarlos solo cuando realmente necesite trabajar con datos de esta manera.

Al mismo tiempo, debe saber que cuando cambiamos la propiedad DOM de un elemento, el atributo correspondiente también cambia, y viceversa. Pero este proceso en los navegadores no siempre se realiza uno a uno.

Las principales diferencias entre las propiedades y los atributos del DOM son:

• el valor de un atributo es siempre una cadena y el valor de una propiedad DOM es un tipo de datos específico (no necesariamente una cadena);
• el nombre del atributo no distingue entre mayúsculas y minúsculas y las propiedades DOM distinguen entre mayúsculas y minúsculas. Aquellos. en el código HTML, podemos, por ejemplo, escribir el atributo ID de HTML como Id, ID, etc. Lo mismo se aplica al nombre del atributo, que especificamos en métodos especiales de JavaScript para trabajar con él. Pero podemos referirnos a la propiedad DOM correspondiente solo por id y de ninguna otra manera.

Trabajar con propiedades DOM de un elemento

Como se señaló anteriormente, trabajar con las propiedades de los elementos en JavaScript se lleva a cabo como con las propiedades de los objetos.

Pero para acceder a una propiedad de algún elemento, primero debe obtenerlo. Puede obtener un elemento DOM en JavaScript, por ejemplo, usando el método querySelector genérico, y una colección de elementos DOM, por ejemplo, usando querySelectorAll.

Como primer ejemplo, considere el siguiente elemento HTML:

En base a ello, analizaremos cómo se obtienen, modifican y agregan nuevas propiedades DOM.

Lectura de valores de propiedad DOM:

// obtiene el valor de la propiedad DOM id var alertId = alert.id; // "alerta" // obtiene el valor de la propiedad DOM className var alertClass = alert.className; // "alert alert-info" // obtiene el valor DOM de la propiedad del título var alertId = alert.title; // "Texto de información sobre herramientas ..."

Cambiar los valores de las propiedades DOM:

// para cambiar el valor de la propiedad DOM, solo necesita asignar un nuevo valor alert.title = "(! LANG: New text for the prompt"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Adición de propiedades DOM:

Alert.lang = "ru"; // establece la propiedad lang en "ru" alert.dir = "ltr"; // establece la propiedad dir en "ltr"

Un ejemplo en el que imprimiremos a la consola todos los valores de las clases que tienen los elementos p de la página:

Var párrafos = document.querySelectorAll ("p"); para (var i = 0, longitud = párrafos.longitud; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Un ejemplo en el que estableceremos todos los elementos con la clase de contenido la propiedad lang con el valor "ru":

Var contenido = document.querySelectorAll (". Contenido"); para (var i = 0, longitud = contenido.longitud; i< length; i++) { contents[i].lang = "ru"; }

Atributos de elementos y métodos para trabajar con ellos

Los atributos se establecen inicialmente en código HTML. Aunque están conectados, de alguna manera, con propiedades, no son lo mismo. En la mayoría de los casos, debe trabajar con propiedades y acceder a los atributos solo cuando realmente lo necesite.

Los valores de atributo, a diferencia de las propiedades DOM, como se indicó anteriormente, son siempre una cadena.

JavaScript tiene cuatro métodos para realizar operaciones de atributos:

• .hasAttribute ("attribute_name"): comprueba la presencia del atributo especificado en el elemento. Si el elemento tiene un atributo marcado, este método devuelve verdadero; de lo contrario, falso.
• .getAttribute ("attribute_name"): obtiene el valor del atributo. Si el elemento no tiene el atributo especificado, este método devuelve una cadena vacía ("") o nula.
• .setAttribute ("nombre_atributo", "valor_atributo"): establece el atributo especificado con el valor especificado para el elemento. Si el elemento tiene el atributo especificado, este método simplemente cambiará su valor.
• .removeAttribute ("attribute_name"): elimina el atributo especificado del elemento.

Veamos algunos ejemplos.

Un ejemplo muy interesante con el atributo de valor.

Ejemplo con atributo de valor

Obtengamos el valor del atributo de valor y la propiedad DOM de valor:

// obtiene el valor del atributo value del elemento name.getAttribute ("value"); // "Bob" // obtiene el valor del valor de la propiedad DOM name.value; // "Bob" // actualiza el valor del atributo value, configúralo en un nuevo valor name.setAttribute ("value", "Tom"); // "Tom" // obtiene el valor del valor de la propiedad DOM name.value; // "Tomás"

En este ejemplo, puede ver que cuando cambia el atributo de valor, el navegador cambia automáticamente la propiedad del valor DOM en consecuencia.

Ahora hagamos lo contrario, es decir, cambiemos el valor de la propiedad DOM y verifiquemos si el valor del atributo cambia:

// establece un nuevo valor para el valor de la propiedad DOM name.value = "(! LANG: John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

En este ejemplo, puede ver que cambiar una propiedad DOM no siempre conduce a un cambio correspondiente en el atributo. Aquellos. en este caso, cambiar el valor de la propiedad DOM no cambia el atributo correspondiente.

Lo mismo ocurrirá cuando el usuario ingrese texto en este campo. El valor de la propiedad DOM contendrá el valor real y el atributo correspondiente contendrá el valor original o el que establezcamos, por ejemplo, usando el método setAttribute.

Este ejemplo muestra que es más correcto trabajar siempre con propiedades DOM, y necesita acceder al atributo solo cuando es realmente necesario.

Incluso cuando necesite obtener el valor inicial que establecimos en HTML, puede usar la propiedad. La propiedad que contiene el valor inicial del atributo value se llama defaultValue.

Name.defaultValue; // Tomás

Otro ejemplo muy interesante, pero ahora con el atributo href.

Ejemplo con atributo href

Un ejemplo en el que necesitamos obtener el valor del enlace tal como se configuró en HTML.

En este ejemplo, el atributo href y la propiedad DOM href contienen valores diferentes. El atributo href es lo que configuramos en el código y la propiedad DOM es la URL completa. Esta distinción viene dictada por el estándar de que el navegador debe hacer coincidir el valor href con la URL completa.

Por lo tanto, si necesitamos obtener lo que está en el atributo, entonces no podemos prescindir del método getAttribute en este caso.

Finalmente, echemos un vistazo al atributo seleccionado.

Ejemplo con el atributo seleccionado

Un ejemplo que muestra cómo puede obtener el valor de la opción seleccionada seleccione:

sin evaluar 1 2 3 4 5

Un ejemplo que muestra cómo puede obtener los valores de las opciones seleccionadas en un elemento seleccionado:

sin evaluar 1 2 3 4 5

Otra forma de trabajar con atributos (propiedad de atributos)

En JavaScript, cada elemento tiene una propiedad de atributos que se puede usar para recuperar todos sus atributos como un objeto NamedNodeMap.

Este método se puede utilizar cuando necesite, por ejemplo, iterar sobre todos los atributos de un elemento.

Se accede a un atributo de esta colección mediante su índice o mediante el método item. Los atributos de esta colección se cuentan desde 0.

Por ejemplo, mostremos todos los atributos de un determinado elemento en la consola:

AMO JAVASCRIPT

Además, también puede trabajar con esta colección utilizando los siguientes métodos:

• .getNamedItem ("attribute_name"): obtiene el valor del atributo especificado (si el atributo especificado está ausente del elemento, el resultado será nulo).
• .setNamedItem ("attribute_yzel"): agrega un nuevo atributo a un artículo o actualiza el valor de uno existente. Para crear un atributo, debe utilizar el método document.createAttribute (), al que se le debe pasar el nombre del atributo como parámetro. Después de eso, al atributo creado se le debe asignar un valor usando la propiedad de valor.
• .removeNamedItem ("attribute_name"): elimina el atributo especificado del elemento (devuelve el atributo eliminado como resultado).

Un ejemplo de cómo trabajar con atributos usando los métodos getNamedItem, setNamedItem y removeNamedItem:

AMO JAVASCRIPT

Tareas

• Imprime en la consola todos los elementos del documento que tienen el atributo id.
• Agregue el atributo de título a todas las imágenes de la página si no tienen este atributo. Establezca el valor del atributo en el valor del atributo alt.

Establece el valor de un atributo en el elemento especificado. Si el atributo ya existe, el valor se actualiza; de lo contrario, se agrega un nuevo atributo con el nombre y valor especificados.

Sintaxis

Elemento.setAttribute ( nombre, valor);

Parámetros

name Un DOMString que especifica el nombre del atributo cuyo valor se va a establecer. El nombre del atributo se convierte automáticamente a minúsculas cuando se llama a setAttribute () en un elemento HTML en un documento HTML. valor Un DOMString que contiene el valor para asignar al atributo. Cualquier valor que no sea una cadena especificado se convierte automáticamente en una cadena.

Los atributos booleanos se consideran verdaderos si "están presentes en el elemento, independientemente de su valor real; como regla, debe especificar la cadena vacía (" ") en el valor (algunas personas usan el nombre del atributo; esto funciona pero no es estándar). Consulte lo siguiente para ver una demostración práctica.

Dado que el valor especificado se convierte en una cadena, especificar nulo no necesariamente hace lo que espera. En lugar de eliminar el atributo o establecer su valor como nulo, establece el valor del atributo en la cadena "nulo". Si desea eliminar un atributo, llame a removeAttribute ().

Valor devuelto

Excepciones

InvalidCharacterError El nombre de atributo especificado contiene uno o más caracteres que no son válidos en los nombres de atributo.

Ejemplo

En el siguiente ejemplo, setAttribute () se usa para establecer atributos en un.

HTML

Hola Mundo

JavaScript

var b = document.querySelector ("botón"); b.setAttribute ("nombre", "helloButton"); b.setAttribute ("desactivado", "");

Esto demuestra dos cosas:

• La primera llamada a setAttribute () anterior muestra el cambio del valor del atributo de nombre a "helloButton". Puede ver esto usando el inspector de páginas de su navegador (Chrome, Edge, Firefox, Safari).
• Para establecer el valor de un atributo booleano, como deshabilitado, puede especificar cualquier valor. Una cadena vacía o el nombre del atributo son valores recomendados. Todo lo que importa es que si el atributo está presente, independientemente de su valor real, su valor se considera verdadero. La ausencia del atributo significa que su valor es falso. Al establecer el valor del atributo deshabilitado en la cadena vacía (""), establecemos deshabilitado en verdadero, lo que da como resultado que el botón se deshabilite.

Métodos DOM que se ocupan de los atributos del elemento:

No son los métodos que se utilizan con mayor frecuencia y que tienen en cuenta el espacio de nombres	Variantes que reconocen el espacio de nombres (DOM Nivel 2)	Métodos DOM Nivel 1 para tratar con los nodos Attr directamente (rara vez se usan)	Métodos conscientes del espacio de nombres DOM Nivel 2 para tratar con los nodos Attr directamente (rara vez se usan)
setAttribute (DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute (DOM 2)	hasAttributeNS	-	-
removeAttribute (DOM 1)	removeAttributeNS	removeAttributeNode	-

Especificación

• DOM Level 2 Core: setAttribute (introducido en DOM Level 1 Core)

Compatibilidad del navegador

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.

Actualizar datos de compatibilidad en GitHub

	Escritorio						Móvil
	Cromo	Borde	Firefox	explorador de Internet	Ópera	Safari	Vista web de Android	Chrome para Android	Firefox para Android	Opera para Android	Safari en iOS	Internet de Samsung
setAttribute	Soporte completo de Chrome Sí	Soporte completo de Edge 12	Soporte completo de Firefox Sí	IE Soporte completo 5 Notas Soporte completo 5 Notas Notas En Internet Explorer 7 y versiones anteriores, setAttribute no establece estilos y elimina eventos cuando intenta configurarlos.	Opera Soporte completo Sí	Safari Soporte completo 6	Compatibilidad total con WebView Android Sí	Compatibilidad total con Chrome Android Sí	Compatibilidad total con Firefox Android Sí	Opera Android Soporte completo Sí	Safari iOS Soporte completo Sí	Samsung Internet Android Soporte completo Sí

Leyenda

Apoyo total Soporte completo Ver notas de implementación. Ver notas de implementación.

Notas de gecko

El uso de setAttribute () para modificar ciertos atributos, especialmente el valor en XUL, funciona de manera inconsistente, ya que el atributo especifica el valor predeterminado. Para acceder o modificar los valores actuales, debe utilizar las propiedades. Por ejemplo, use Element.value en lugar de Element.setAttribute ().