Element.setAttribute
====================

Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado.

Para obtener el valor actual de un atributo, se utiliza `getAttribute()`; para eliminar un atributo, se llama a `removeAttribute()`.

Sintaxis
--------


```js
Element.setAttribute(name, value);
```

### Parámetros

`name`

Un `DOMString` indicando el nombre del atributo cuyo valor se va a cambiar. El nombre del atributo se convierte automáticamente en minúsculas cuando `setAttribute()` se llama sobre un elemento HTML en un documento HTML.

`value`

Un `DOMString` que contenga el valor que asignar al atributo. Cualquier valor indicado que no sea una cadena de texto se convierte automáticamente en una cadena de texto.

Los atributos booleanos se consideran `true` si al menos están presentes en el elemento, independientemente de su `value` actual; como regla, se debería especificar una cadena de texto vacía (`""`) en `value` (algunas personas utilizan el nombre del atributo; esto funciona pero no es un standard). Vea un ejemplo posterior para una demostración práctica.

Dado que `value` se convierte en una cadena de texto, indicando `null` no necesariamente hace lo que se espera. En lugar de eliminar el atributo o establecer su valor para ser `null`, establece el valor del atributo a la cadena de texto `"null"`. Si se desea eliminar un atributo, se debe llamar a `removeAttribute()`.

### Valor devuelto

`undefined`.

### Excepciones

`InvalidCharacterError`

El atributo especificado `name` contiene uno o más caracteres que no son válidos en el nombre del atributo.

Ejemplo
-------

En el siguiente ejemplo, `setAttribute()` se utiliza para establecer atributos en un `<button>`.

### HTML


```html
<button>Hola Mundo</button>
```

### JavaScript


```js
var b = document.querySelector("button");

b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
```


Esto demuestra dos cosas:

* La primera llamada a `setAttribute()` muestra cómo se cambia el valor del atributo `name` a "helloButton". Puede ver esto utilizando el inspector de página de su navegador (Chrome, Edge, Firefox, Safari).
* Para establecer el valor de un atributo booleano, como `disabled`, se puede especificar cualquier valor. Una cadena de texto vacía o el nombre de un atributo son valores recomendados. Todo lo que importa es que si el atributo está presente, *independientemente de su valor actual*, su valor se considera como `true`. La ausencia del atributo significa que su valor es `false`. Estableciendo una cadena vacía (`""`) como el valor del atributo `disabled`, se estaría cambiando `disabled` a `true`, lo que provoca que el botón sea deshabilitado.

Métodos DOM que tratan con atributos de elementos:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-setattribute① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.