recursal/MDN huggingface dataset:
NonDocumentTypeChildNode.nextElementSibling
===========================================

La propiedad de sólo lectura `NonDocumentTypeChildNode.nextElementSibling` devuelve el elemento inmediatamente posterior al especificado, dentro de la lista de elementos hijos de su padre, o bien `null` si el elemento especificado es el último en dicha lista.

Sintaxis
--------


```js
var nextNode = elementNodeReference.nextElementSibling;
```

Ejemplo
-------


```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
 var el = document.getElementById("div-01").nextElementSibling;
 console.log("Siblings of div-01:");
 while (el) {
 console.log(el.nodeName);
 el = el.nextElementSibling;
 }
</script>
```


Este ejemplo muestra en la consola lo siguiente cuando se carga:
```

Siblings of div-01:
DIV
SCRIPT
```

Polyfill para Internet Explorer 8
---------------------------------

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento de código puede utilizarse para añadir el soporte a IE8:


```js
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if (!("nextElementSibling" in document.documentElement)) {
  Object.defineProperty(Element.prototype, "nextElementSibling", {
    get: function () {
      var e = this.nextSibling;
      while (e && 1 !== e.nodeType) e = e.nextSibling;
      return e;
    },
  });
}
```

Polyfill para Internet Explorer 9+ y Safari
-------------------------------------------


```js
// Source: https://github.com/jserz/js\_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty("nextElementSibling")) {
      return;
    }
    Object.defineProperty(item, "nextElementSibling", {
      configurable: true,
      enumerable: true,
      get: function () {
        var el = this;
        while ((el = el.nextSibling)) {
          if (el.nodeType === 1) {
            return el;
          }
        }
        return null;
      },
      set: undefined,
    });
  });
})([Element.prototype, CharacterData.prototype]);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-nextelementsibling② |

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

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

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

* La interfaz pura `ChildNode`.
* Tipos de objetos que implementan esta interfaz pura: `CharacterData` (en-US), `Element`, y `DocumentType` (en-US).
element.getClientRects
======================

El método `Element.getClientRects()` devuelve una colección de objetos `DOMRect` (en-US) que indican los rectángulos que delimitan el rectángulo de cada línea de texto en el navegador.

Sintaxis
--------


```js
var rectCollection = object.getClientRects();
```

Devuelve
--------

El valor devuelto es una colección de objetos rectangulares `DOMRect` (en-US), uno para cada cuadro borde CSS asociado al elemento. Cada objeto `DOMRect` (en-US) contiene las propiedades de sólo lectura: `left`, `top`, `right` y `bottom`, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del *viewport.* En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el `<svg>` externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el `<svg>` externo (y serán transformados por las trasnformaciones del `<svg>` externo, si estas existen).

**Nota:** Firefox 3.5 ha agregado las propiedades `width` y `height` al objeto `TextRectangle`.

La cantidad de desplazamiento que ha tenido el área del viewport (o cualquier otro elemento desplazable) se tiene en cuenta al calcular los rectángulos.

Los rectángulos devueltos no incluyen los márgenes de ningún elemento hijo que se haya podido haber desbordado.

Para los elementos de AREA en HTML, elementos SVG que no renderizen nada por si mismos, los elementos `display:none`, y generalmente cualquier elemento que no sea renderizado directamente, se devuelve una lista vacia.

Aún si la caja CSS tiene bordes vacios, se devuelven las coordenadas. Las coordenadas `left`, `top`, `right` y `bottom` pueden aún tener significado.

Es posible que los valores de desplazamiento sean fracciones de pixel.

Ejemplo
-------


```js
var rects = obj.getClientRects();
var numLines = rects.length;
```

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

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

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

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

Referencias
-----------

* MSDN's getClientRects definition
GlobalEventHandlers.ontouchstart
================================

Un `global event handler` para el evento `touchstart` (en-US).

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

**Nota:** Este atributo *no* ha sido estandarizado formalmente. Está especificado en la especificación Touch Events – Level 2 Draft y no en Touch Events Recommendation. Este atributo no está totalmente implementado.

Sintaxis
--------


```js
var startHandler = cualquierElemento.ontouchstart;
```

### Valor devuelto

`startHandler`

El manejador del evento `touchstart` para el elemento `cualquierElemento`.

Ejemplo
-------

Este ejemplo muestra dos formas de utilizar `ontouchstart` para establecer un manejador de evento `touchstart`.


```js
<html>
<script>
function startTouch(ev) {
 // Procesar el evento
}
function init() {
 var el=document.getElementById("target1");
 el.ontouchstart = startTouch;
}
</script>
<body onload="init();">
<div id="target1"> Tócame ... </div>
<div id="target2" ontouchstart="startTouch(event)"> Tócame ... </div>
</body>
</html>
```

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

| Specification |
| --- |
| Touch Events # event-touchstart |
| Touch Events # dom-globaleventhandlers-ontouchstart |

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

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

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

* `touchstart` (en-US)
Element.classList
=================

La propiedad de sólo lectura `Element.classList` devuelve una colección activa de `DOMTokenList` (en-US) de los atributos de clase del elemento.

Usar `classList` es una forma práctica de acceder a la lista de clases de un elemento como una cadena de texto delimitada por espacios a través de `element.className`.

Sintaxis
--------


```js
var elementClasses = elementNodeReference.classList;
```


*elementClasses* es un DOMTokenList (en-US) que representa el atributo clase de *elementNodeReference*. Si el atributo clase no está definido o está vacío, *elementClasses.length* devuelve 0. `element.classList` por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos `add()` y `remove()`.

Métodos
-------

add( String [, String] )

Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.

remove( String [, String] )

 Elimina las clases indicadas.
 **Nota:** Eliminar una clase que no existe NO produce un error.


**item**( Number )

Devuelve el valor de la clase por índice en la colección.

**toggle**( String [, force] )

 Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la **elimina** y devuelve `false`, si no, la **añade** y devuelve `true`.
 Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como `true`, se añade la clase indicada, y si se evalúa como `false`, la elimina.


contains( String )

Comprueba si la clase indicada existe en el atributo de clase del elemento.

replace( oldClass, newClass )

Reemplaza una clase existente por una nueva.

Ejemplos
--------


```js
// div es una referencia de objeto al elemento <div> con class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// si visible está presente la elimina, de lo contrario la añade
div.classList.toggle("visible");

// añadir/eliminar visible, dependiendo de la condición, i menor que 10
div.classList.toggle("visible", i < 10);

alert(div.classList.contains("foo"));

// añadir o eliminar varias clases
div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");

// reemplazar la clase "foo" por "bar"
div.classList.replace("foo", "bar");
```


**Nota:** Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea https://bugzilla.mozilla.org/show\_bug.cgi?id=814014

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

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

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

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

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

* `element.className`
* `DOMTokenList` (en-US);
Element.clientHeight
====================

La propiedad de sólo lectura `Element.clientHeight` devuelve la altura de un elemento en píxeles, incluyendo el padding pero no las barras horizontales, el borde o el margen.

`clientHeight` puede ser calculado como CSS `height` + CSS `padding` - alto de la barra horizontal (si existe).

**Nota:** Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa `element.getBoundingClientRect()`.

Sintaxis
--------


```js
var h = element.clientHeight;
```


`h` es un entero que representa el alto de *element* en píxeles.

Ejemplo
-------

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

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

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

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

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

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

* `Element.offsetHeight`
* `Element.scrollHeight`
* Determining the dimensions of elements (en-US)
* MSDN: Measuring Element Dimension and Location
NonDocumentTypeChildNode.previousElementSibling
===============================================

La propiedad de sólo lectura `NonDocumentTypeChildNode.previousElementSibling` retorna el `Element` predecesor inmediato al especificado dentro de la lista de hijos de su padre, o bien `null` si el elemento especificado es el primero de dicha lista.

Sintaxis
--------


```js
prevNode = elementNodeReference.previousElementSibling;
```

Ejemplo
-------


```html
<div id="div-01">Aquí está div-01</div>
<div id="div-02">Aquí está div-02</div>
<li>Esto es un elemento de lista</li>
<li>Esto es otro elemento de lista</li>
<div id="div-03">Aquí esta div-03</div>

<script>
 var el = document.getElementById("div-03").previousElementSibling;
 document.write("<p>Hermanos de div-03</p><ol>");
 while (el) {
 document.write("<li>" + el.nodeName + "</li>");
 el = el.previousElementSibling;
 }
 document.write("</ol>");
</script>
```


Este ejemplo muestra lo siguiente en la página cuando carga:
```

Hermanos de div-03

   1. LI
   2. LI
   3. DIV
   4. DIV
```

Polyfill para Internet Explorer 8
---------------------------------

Esta propiedad no está soportada con anterioridad a IE9, así que puede utilizarse el siguiente fragmento para añadri el soporte a IE8:


```js
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if (!("previousElementSibling" in document.documentElement)) {
  Object.defineProperty(Element.prototype, "previousElementSibling", {
    get: function () {
      var e = this.previousSibling;
      while (e && 1 !== e.nodeType) e = e.previousSibling;
      return e;
    },
  });
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-previouselementsibling② |

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

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

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

* El interfaz puro `NonDocumentTypeChildNode` (en-US).
* Tipos de objetos que implementan este interfaz puro: `CharacterData` (en-US), y `Element`.
Element.scrollIntoView()
========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
El método `scrollIntoView()` de la interfaz `Element` desplaza el contenedor principal del elemento de forma que el elemento sobre el cual se invoca `scrollIntoView()` sea visible al usuario.

Sintaxis
--------


```js
element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Argumentos booleanos
element.scrollIntoView(scrollIntoViewOptions); // Argumento objeto
```

### Parámetros

`alignToTop`

Es un valor `Boolean`:

* Si es `true`, la parte superior del elemento se alineará con la parte superior del área visible del elemento desplazable antecesor.
* Si es `false`, la parte inferior del elemento se alineará con la parte inferior del área visible del elemento desplazable antecesor.

`scrollIntoViewOptions` Opcional 
Experimental

Un booleano o un objeto con las siguientes opciones:

`behavior` Opcional

 Establece la transición de la animación.
 Puede ser `auto` o `smooth`. Por defecto es `auto`.


`block` Opcional

 Establece el alineamiento vertical.
 Puede ser `start`, `center`, `end`, o `nearest`. Por defecto es `start`.


`inline` Opcional

 Establece el alineamiento horizontal
 Puede ser `start`, `center`, `end`, o `nearest`. Por defecto es `nearest`.


Ejemplo
-------


```js
var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ block: "end", behavior: "smooth" });
```

Notas
-----

Puede que el desplazamiento no sea llevado completamente a la parte superior o inferior dependiente de la disposición de otros elementos.

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

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

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

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

El método **`Element.remove()`** elimina un elemento del DOM.

Sintaxis
--------


```js
remove()
```

### Parámetros

Ninguno.

### Valor de retorno

Ninguno (`undefined`).

Ejemplos
--------

### Utilizando `remove()`


```html
<div id="div-01">Aquí está el div-01</div>
<div id="div-02">Aquí está el div-02</div>
<div id="div-03">Aquí está el div-03</div>
```



```js
const element = document.getElementById("div-02");
element.remove(); // Elimina el div con el id 'div-02'
```

### `Element.remove()` no se puede recorrer

 El método `remove()` no está incluido en la sentencia `with`.
 Véase `Symbol.unscopables` para más información.


```js
with (node) {
  remove();
}
// ReferenceError: remove no está definido
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-remove① |

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

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

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

* Polyfill
element.clientTop
=================

Resumen
-------

El ancho del borde superior de un elemento en pixel. No incluye ni el *margin-top* , ni el *padding-top* . `clientTop` es de sólo lectura.

Las aplicaciones "Gecko-based applications" implementan el uso de `clientTop` a partir de Gecko 1.9 (Firefox 3,ver Error 111207 en Firefox). Esta propiedad no está disponible en Firefox 2 o anteriores.

Sintaxis
--------


```js
vartop = element.clientTop;
```

Ejemplo
-------
```

<div
 id="offsetContainer"
 style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
  <div
 id="idDiv"
 style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
    <p
 id="PaddingTopLabel"
 style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
      padding-top
    </p>

    <p>
      Suave, individualista y muy leal, los gatos de Birmania tienen un carácter
      entre los persas y los siameses. Si le gustan los gatos que no son
      agresivos, disfrutan estar entre los humanos y son generalmente
      tranquilos, esta es la raza para usted.
    </p>

    <p>
      Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas,
      patas y cola.
    </p>

    <p>
      La imagen del gato y el texto vienen de
      <a class="external" href="http://www.best-cat-art.com/"
 >www.best-cat-art.com</a
 >
    </p>

    <p
 id="PaddingBottomLabel"
 style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
      padding-bottom
    </p>
  </div>
  <strong
 style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;"
 >Left</strong
 ><strong
 style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;"
 >Top</strong
 ><strong
 style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;"
 >Right</strong
 ><strong
 style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;"
 >Bottom</strong
 >
</div>
```

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

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

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

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

Referencias
-----------

* MSDN's clientTop definition
* MSDN's Measuring Element Dimension and Location
Element.insertAdjacentHTML()
============================

EL método `insertAdjacentHTML()` de la interfaz `Element` analiza la cadena de texto introducida como cadena HTML o XML e inserta al árbol DOM los nodos resultantes de dicho análisis en la posición especificada. Este método no re-analiza el elemento sobre el cual se está invocando y por lo tanto no corrompe los elementos ya existentes dentro de dicho elemento. Esto evita el paso adicional de la serialización, haciéndolo mucho más rápido que la manipulación directa con `innerHTML`.

Sintaxis
--------


```js
element.insertAdjacentHTML(posición, texto);
```

### Parámetros

`posición`

Un `DOMString` que representa la posición relativa al `elemento`, y deberá ser una de las siguientes cadenas:

* `'beforebegin'`: Antes que el propio `elemento`.
* `'afterbegin'`: Justo dentro del `elemento`, antes de su primer elemento hijo.
* `'beforeend'`: Justo dentro del `elemento`, después de su último elemento hijo.
* `'afterend'`: Después del propio `elemento`.

`texto`

Es la cadena a ser analizada como HTML o XML e insertada en el árbol.

### Visualizacion de las posiciones
```

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**Nota:** Las posiciones `beforebegin` y `afterend` funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.

Ejemplo
-------


```js
// <div id="one">one</div>
var d1 = document.getElementById("one");
d1.insertAdjacentHTML("afterend", '<div id="two">two</div>');

// En este punto, la nueva estructura es:
// <div id="one">one</div><div id="two">two</div>
```

Notas
-----

### Consideraciones de seguridad

Cuando se inserte texto HTML en una página usando `insertAdjacentHTML()` debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso.

Se recomienda no usar `insertAdjacentHTML()` cuando se pretende insertar texto plano; en su lugar, se debe utilizar la propiedad `Node.textContent` o el método `Element.insertAdjacentText()` (en-US). Este método no interpreta el contenido pasado como HTML, si no que lo inserta como texto plano.

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

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

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

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

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

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentText()` (en-US)
* `XMLSerializer` (en-US): Contruir una representación del DOM de un texto XML
* hacks.mozilla.org guest post por Henri Sivonen incluye puntos de referencia mostrando que insertAdjacentHTML puede ser mucho más rápido en algunos casos.
Element.getElementsByTagNameNS()
================================

El método `Element.getElementsByTagNameNS()` devuelve una `HTMLCollection` viva de elementos con el nombre de etiqueta dado perteneciente al espacio de nombres dado. Es similar a `Document.getElementsByTagNameNS`, con la excepción de que su búsqueda está limitada a los descendientes del elemento especificado.

Sintaxis
--------


```js
elementos = elemento.getElementsByTagNameNS(espacioNombreURI, nombreLocal);
```


* `elementos` es una `HTMLCollection` viva de elementos encontrados en el orden en el que aparecen en el árbol.
* `elemento` es el elemento desde el cual la búsqueda debería comenzar. Nótese que sólo los descendientes de este elemento están incluídos en la búsqueda, no el nodo en sí.
* `espacioNombreURI` es el URI del espacio de nombres de los elementos a buscar (vea `Node.namespaceURI` (en-US)). Por ejemplo, si usted necesita buscar elementos XHTML, use el URI de espacio de nombres de XHTML, `https://www.w3.org/1999/xhtml`.
* nombreLocal puede ser el nombre local de los elementos a buscar o el valor especial `"*"`, que encuentra todos los elementos (vea `Node.localName` (en-US)).
Ejemplo
-------


```js
// verifica la alineación en un número de celdas en una tabla en un documento XHTML.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagNameNS("https://www.w3.org/1999/xhtml", "td");

for (var i = 0; i < cells.length; i++) {
  var axis = cells[i].getAttribute("axis");
  if (axis == "year") {
    // obtiene los datos
  }
}
```

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

| Specification |
| --- |
| DOM Standard # dom-element-getelementsbytagnamens |

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

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