recursal/MDN huggingface dataset:
Element.clientWidth
===================

La propiedad `Element.clientWidth` es cero para elementos sin CSS o cajas de diseño (layout), en caso contrario es la anchura interior de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical (si está presente, si está dibujada), el borde o el margen.

**Nota:** El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use `element.getBoundingClientRect()`.

Sintaxis
--------


```js
var intElemClientWidth = element.clientWidth;
```


*intElemClientWidth* será un entero que corresponde con el **clientWidth** del elemento en pixels. **clientWidth** es de sólo-lectura.

Ejemplo
-------

![Image:Dimensions-client.png](/es/docs/Web/API/Element/clientWidth/dimensions-client.png)

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

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

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

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

Véase también
-------------

* `HTMLElement.offsetWidth`
* `Element.scrollWidth`
* Determining the dimensions of elements (en-US)
* MSDN Measuring Element Dimension and Location
Element.prefix
==============

La propiedad `Element.prefix` unicamente de lectura devuelve el namespace prefix de el elemento especificado, o `null` si no hay especificado prefix.

**Nota:** Antes de DOM4 esta API fué definida dentro de la interfaz `Node`.

Síntaxis
--------


```js
string = element.prefix;
```

Ejemplos
--------

Los siguientes registros "x" en la consola.


```xml
<x:div onclick="console.log(this.prefix)"/>
```

Notas
-----

Solo funcionará cuando se utiliza un analizador de namespace, ej. Cuando un documento es servido con un tipo XML MIME . No funcionará para documentos HTML.

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

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

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

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

Véase también
-------------

* `Element.namespaceURI`
* `Element.localName`
* `Attr.prefix` (en-US)
* `Node.prefix` (en-US)
Element.ongotpointercapture
===========================

`ongotpointercapture` es una propiedad `event handler` de la interfaz `Element` que devuelve el controlador de eventos (función) para el evento tipo `gotpointercapture`.

Síntaxis
--------


```js
var gotCaptureHandler = target.ongotpointercpature;
```

### Valor de Retorno

`gotCaptureHandler`

El controlador de eventos gotpointercapture para el elemento target.

Ejemplo
-------


```js
<html>
<script>
function overHandler(ev) {
 // Determine the target event's gotpointercapture handler
 var gotCaptureHandler = ev.target.ongotpointercapture;
}
function init() {
 var el=document.getElementById("target");
 el.onpointerover = overHandler;
}
</script>
<body onload="init();">
<div id="target"> Touch me ... </div>
</body>
</html>
```

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

| Specification |
| --- |
| Pointer Events # the-gotpointercapture-event |
| Pointer Events # dom-globaleventhandlers-ongotpointercapture |

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

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

Véase también
-------------

* `gotpointercapture`
Element.hasAttribute()
======================

El método `Elemento.hasAttribute()` devuelve un valor **Booleano** indicando si el elemento tiene el atributo especificado o no.

Sintaxis
--------


```js
var resultado = elemento.hasAttribute(nombre);
```


`resultado`

contendrá el valor devuelto (`true` o `false)`.

`nombre`

consiste en una cadena de caracteres que representa el nombre del atributo a chequear.

Ejemplo
-------


```js
var foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
  // hacer algo
}
```

Polyfill
--------


```js
(function (prototype) {
  prototype.hasAttribute =
    prototype.hasAttribute ||
    function (name) {
      return !!(this.attributes[name] && this.attributes[name].specified);
    };
})(Element.prototype);
```

Notas
-----

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-hasattribute① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.getElementsByClassName()
================================

El método `Element.getElementsByClassName()` retorna una `HTMLCollection` "viva" conteniendo todos los elementos hijos que tienen todos los nombres de clase dados. Cuando se llama en el objeto document, se realiza la búsqueda en el documento completo, incluyendo el nodo raíz.

De forma similar, el método `Document.getElementsByClassName()` actúa en todo el documento; retornará los elementos que sean descendientes del documento raiz especificado que tengan los nombres de clase dados.

Sintaxis
--------


```js
var elements = element.getElementsByClassName(names);
```


* **elements** es una `HTMLCollection` "viva" de los elementos encontrados.
* **names** es una cadena representando la lista de nombres de clase que deben concordar; los nombres de clase está separados por espacios en blanco.
* *element* es cualquier `Element` de un documento.
Ejemplo
-------

Obtiene todos los elementos que tienen una clase `test`:


```js
element.getElementsByClassName("test");
```


Obtiene todos los elementos que tienen tanto la clase `red` como `test`:


```js
element.getElementsByClassName("red test");
```


Obtiene todos los elementos que tienen la clase of `test`, dentro de un elemento que tiene el `id` `main`:


```js
document.getElementById("main").getElementsByClassName("test");
```


Podemos también usar métodos de `Array.prototype` en cualquier `HTMLCollection` pasando `el HTMLCollection` como el valor *this* del método. Aquí encontramos todos los elementos `<div>` que tienen una clase `test`:


```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "div";
  },
);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getelementsbyclassname |

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

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

La propiedad de sólo lectura `ParentNode.childElementCount` devuelve un número del tipo `unsigned long` que representa la cantidad de elementos hijo que penden del elemento padre (ParentNode).

**Nota:** Esta propiedad fue inicialmente definida en la interfaz pura `ElementTraversal`. Como esta interfaz contenía dos conjuntos distintos de propiedades: una apuntaba al `Node` con hijos y otra a los hijos, fueron trasladados a dos interfaces puras separadas: `ParentNode` y `ChildNode`. En este caso, `childElementCount` se mudó a `ParentNode`. Este es un cambio bastante técnico que no debería afectar a la compatibilidad.

Sintaxis
--------


```js
var elCount = elementNodeReference.childElementCount;
```

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

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

Véase también
-------------

* Las interfaces puras `ParentNode` y `ChildNode`.
* Tipos de objeto que implementan estas interfaces: `Document`, `Element`, y `DocumentFragment`.
blur (evento)
=============

El evento `blur` es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y `focusout` (en-US) es que sólo el último se propaga (bubbles).

Información General
-------------------

Especificación

DOM L3

Interfaz
`FocusEvent` (en-US)
Burbujas

No

Cancelable

No

Objetivo

Element

Acción por defecto

Ninguna.


**Nota:** El valor de `Document.activeElement` (en-US) varía a traves de navegadores mientras este evento está siendo manejado (Error 452307 en Firefox): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.

Propiedades
-----------

| Propiedad | Tipo | Descripción |
| --- | --- | --- |
| `target` Read only  | `EventTarget` | Objetivo del evento (elemento DOM) |
| `type` Read only  | `DOMString` | El tipo de evento. |
| `bubbles` Read only  | `Boolean` | Si el elemento normalmente se propaga o no. |
| `cancelable` Read only  | `Boolean` | Si el evento es cancelable o no. |
| `relatedTarget` Read only  | `EventTarget` (DOM element) | null |

Delegación de eventos
---------------------

Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento `focusout` en exploradores que lo soporten, o cambiando el parámetro "useCapture" de `addEventListener` (en-US) a `true`:

### Contenido HTML


```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

### Contenido JavaScript


```js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);
```

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

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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

Eventos relacionados
--------------------

* `focus` (en-US)
* `blur`
* `focusin` (en-US)
* `focusout` (en-US)
Conceptos básicos de Fetch
==========================

La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado `XMLHttpRequest`, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.

**Nota:** Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)

En pocas palabras
-----------------

En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP `Request`s, `Response`s, `Headers` (en-US), y `Body`, junto a un método `global fetch` (en-US) para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.

Service Workers (en-US) es un ejemplo de una API que hace un fuerte uso de Fetch.

Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en `Promise`.

Guard
-----

Guard es una característica de objetos `Headers` (en-US), con los valores posibles `immutable`, `request`, `request-no-cors`, `response`, o `none`, dependiendo de donde el encabezado es usado.

Cuando un nuevo objeto `Headers` (en-US) es creado usando el `Headers()` (en-US) constructor, su guarda (guard) se establece a `none` (por defecto). Cuando un objeto `Request` o `Response` es creado, tiene un objeto `Headers` (en-US) asociado cuyo guarda (guard) se establece como se resume a continuación:

| nuevo tipo de objeto | creando el constructor | 
 configuraciones de guarda (guard) del objeto
 `Headers` (en-US) asociado
  |
| --- | --- | --- |
| `Request` | `Request()` (en-US) | `request` |
| `Request()` (en-US) con
 `mode` (en-US) de `no-cors` | `request-no-cors` |
| `Response` | `Response()` | `response` |
| 
 Métodos `error()` (en-US) o
 `redirect()` (en-US) | `immutable` |

Un guarda (guard) de encabezado afecta los métodos `set()` (en-US), `delete()` (en-US), y `append()` (en-US) que cambían los contenidos del encabezado. Un `TypeError` es arrojado si se trata modificar un objeto `Headers` (en-US) cuyo guarda (guard) es `immutable`. Sin embargo, la operación funcionará si

* guard es `request` y el nombre del encabezado no es un forbidden header name .
* guard es `request-no-cors` y el encabezado *nombre/valor* es un simple header (en-US) .
* guard es `response` y el nombre del encabezado no es forbidden response header name (en-US).
Notification.dir
================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

La propiedad `dir` de solo lectura de la interfaz `Notification` indica la direccion del texto en la notificación, como se especifica en la opción `dir` del constructor `Notification()` (en-US).

Sintaxis
--------


```js
var direction = Notification.dir;
```

### Valor

Un `DOMString` especifica la dirección del texto, los posibles valores pueden ser:

* `auto`: Aplica el comportamiento del idioma del navegador (por defecto).
* `ltr`: El texto es desplegado de izquierda a derecha.
* `rtl`: El texto es desplegado de derecha a izquierda.

**Nota:** La mayoría de los navegadores parecen ignorar las intrucciones explicitas `ltr` y `rtl`, y solo van a las proveídas por el navegador.

Ejemplos
--------

El siguiente código ejecuta una notificación; se crea un simple objeto `options`, luego la notificación se dispara usando el constructor `Notification()`.


```js
var options = {
  body: "Do you like my body?",
  dir: "rtl",
};

var n = new Notification("Notificación de prueba", options);

console.log(n.dir); // Deberia retornar 'rtl'
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-dir |

Navegadores Compatibles
-----------------------

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

Ver tambien
-----------

* Usando la API de Notificaciones
Notification.icon
=================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

 La propiedad de solo lectura **`icon`** de la interfaz
 `Notification` contiene la URL de un ícono que
 se mostrará como parte de la notificación, como se especifica en la opción
 `icon` del constructor
 `Notification()` (en-US).

Sintaxis
--------


```js
var icon = Notification.icon;
```

### Valor

Un `USVString` (en-US).

Ejemplos
--------

 En nuestra
 aplicación de lista de tareas pendientes
 (ver la aplicación ejecutándose en vivo),
 usamos el constructor
 `Notification()` (en-US) para disparar una
 notificación, pasandole los argumentos que especifican el cuerpo, ícono y
 título que queremos.


```js
var notification = new Notification("Lista de tareas pendientes", {
  body: text,
  icon: img,
});
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-icon |

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

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

Véase también
-------------

* Usando la API de Notificaciones
Notification: evento close
==========================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

El evento **`close`** de la interfaz de `Notification` se activa cuando se cierra una `Notification`.

Sintaxis
--------

Use el nombre del evento en métodos como `addEventListener()`, o establezca una propiedad de manejador de eventos.


```js
addEventListener("close", (event) => {});

onclose = (event) => {};
```

Tipo de evento
--------------

Un `Event` genérico.

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

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

Véase también
-------------

* `Notification`
* Uso de la API de Notificaciones
Notification.body
=================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

 La propiedad **`body`** de solo lectura de la interfaz
 `Notification` indica la cadena del cuerpo de la notificación, como
 se especifica en la opción `body` del constructor
 `Notification()` (en-US).

Sintaxis
--------


```js
var body = Notification.body;
```

### Valor

Un `DOMString`.

Ejemplos
--------


```js
function spawnNotification(theBody, theIcon, theTitle) {
  var options = {
    body: theBody,
    icon: theIcon,
  };
  var n = new Notification(theTitle, options);

  console.log(n.body);
}
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-body |

Compatibilidad del navegador
----------------------------

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

See also
--------

* Usando la API de notificaciones
Notification.close()
====================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

 El método `close()` de la interfaz `Notification` se utiliza para
 cerrar/eliminar una notificación mostrada anteriormente.


**Nota:** Esta API no debe usarse solo para tener la notificación
 eliminada de la pantalla después de un retraso fijo ya que este método también eliminará la
 notificación de cualquier bandeja de notificación, evitando que los usuarios interactúen con ella
 después de que se mostró inicialmente. Un uso válido para esta API sería eliminar una
 notificación que ya no es relevante (por ejemplo, el usuario ya leyó la notificación
 en la página web en el caso de una aplicación de mensajería o si ya se está reproduciendo la siguiente canción
 en una aplicación de música).


Sintaxis
--------


```js
close();
```

### Parámetros

Ninguno.

### Valor retornado

Ninguno (`undefined`).

Ejemplos
--------

 En el siguiente fragmento, tenemos una función simple que, cuando se llama, crea un
 objeto `options` y luego una nueva notificación. Al final de la función, se
 llama también a `close()` dentro de la
 función `addEventListener()` para eliminar la
 notificación cuando el contenido relevante ha sido leído en la página web.


```js
function spawnNotification(theBody, theIcon, theTitle) {
  var options = {
    body: theBody,
    icon: theIcon,
  };

  var n = new Notification(theTitle, options);
  document.addEventListener("visibilitychange", function () {
    if (document.visibilityState === "visible") {
      // La pestaña es ahora visible, así que cierro/elimino la notificación obsoleta.
      n.close();
    }
  });
}
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-close |

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

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

Véase también
-------------

* Uso de la API de Notificaciones
Notification.onclick
====================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

La propiedad `onclick` de la interfaz `Notification` especifica un escuchador de eventos para recibir eventos `click`. Estos eventos ocurren cuando el usuario hace click sobre el `Notification` mostrado.

Sintaxis
--------


```js
Notification.onclick = function (event) {
  /\* ... \*/
};
```


El comportamiento por defecto es mover el foco al viewport del sitio de contexto de dicha notificación. Si no deseas este comportamiento, puedes llamar `preventDefault()` en el objeto del evento.

Ejemplos
--------

En el siguiente ejemplo, utilizamos un manejador `onclick` para abrir un sitio web en una nueva pestaña (especificado con la inclusión del parámetro `'_blank'`) una vez que la notifación es cliqueada.


```js
notification.onclick = function (event) {
  event.preventDefault(); // Evita que el navegador enfoque la pestaña del Notification
  window.open("http://www.mozilla.org", "\_blank");
};
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-onclick |

Browser compatibility
---------------------

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

Véase también
-------------

* `Notification`
* Usando la API de Notificaciones
Notification: evento show
=========================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

El evento **`show`** de la interfaz de `Notification` se activa cuando se muestra una `Notification`.

Sintaxis
--------

Use el nombre del evento en métodos como `addEventListener()`, o establezca una propiedad de manejador de eventos.


```js
addEventListener("show", (event) => {});

onshow = (event) => {};
```

Tipo de evento
--------------

Un `Event` genérico.

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

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

Véase también
-------------

* `Notification`
* Uso de la API de Notificaciones
Notification: evento error
==========================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

El evento **`error`** de la interfaz de `Notification` se activa cuando algo sale mal con una `Notification` (en muchos casos, un error que impide que se muestre la notificación).

Sintaxis
--------

Use el nombre del evento en métodos como `addEventListener()`, o establezca una propiedad de manejador de eventos.


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

Tipo de evento
--------------

Un `Event` genérico.

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-onerror |

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

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

Véase también
-------------

* `Notification`
* Uso de la API de Notificaciones