# Ayudantes del DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM y APPEARANCE

> Lee atributos data, pregunta si un elemento se muestra o está en pantalla, añade estilos que puedes reemplazar, mueve elementos dentro de su padre, actualiza una lista sin redibujarla y define los colores y el modo oscuro de la página.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: c57d4a10db8dd55691909e3666459ad49cefc60e6456064c8c53aa6f9f07442a
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- `ATTRD(element or event, [name])` lee `data-<name>` (por defecto `data-id`) de un elemento, un objeto jQuery o el elemento de un evento; en un objeto simple lee la propiedad.
- `HIDDEN(element)` es `true` cuando el elemento no se muestra (él o un padre tiene `display: none`; **un elemento que es hijo directo del body se considera siempre no oculto**, la comprobación empieza por su padre); `VISIBLE(element, [threshold], [mode])` es `true` cuando está dentro de la parte visible de la ventana (`mode` `'above'` o `'below'` pregunta dónde está cuando no lo está). `NOTFOCUSED()` es `true` cuando la pestaña del navegador está en segundo plano e `inDOM(element)` es verdadero mientras el elemento está en el documento.
- `WIDTH([element])` devuelve la clase de tamaño del ancho del elemento (por defecto: la ventana): `'xs'`, `'sm'`, `'md'` o `'lg'` (los límites están en `DEF.devices`). `WW` y `WH` son el tamaño de la ventana; `$W` es el objeto jQuery de la ventana; `SCROLLBARWIDTH()` es el ancho que ocupa una barra de desplazamiento.
- `SCROLLBAR(element, [options])` envuelve un elemento con una barra de desplazamiento personalizada y lo devuelve; `scrollbar.resize()` la recalcula después de que cambie el contenido.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` e `isIE` son booleanos sobre el navegador, establecidos cuando la página arranca.
- `STYLE(css, [id], [selector])` añade un `<style>` al head. Con un `id` el estilo se reemplaza cuando lo llamas de nuevo con el mismo id; con un `selector` cada regla queda envuelta por él (`'.a { }'` pasa a `'#p .a{ }'`).
- `NODEINDEXOF(element)` es la posición del elemento entre sus hermanos, `NODEINSERT(element, reference, [before])` mueve un elemento después de (o antes de) otro y `NODEMOVE(element, [up])` lo mueve un lugar hacia abajo (o hacia arriba).
- `DIFFDOM(parent, selector, html, [attribute])` hace que los hijos de `parent` que coinciden con `selector` sean iguales a los de `html`, **sin redibujar** los que ya están: un elemento es el mismo cuando su `attribute` tiene el mismo valor (sin `attribute`, cuando todo su HTML es igual). Elimina los que no están en la nueva lista, añade los nuevos y los pone en el orden de `html`, y devuelve `{ add, upd, rem }`. El contenido de un elemento que se conserva **no** se reemplaza.
- `APPEARANCE({ color, dark, large, <name>: value })` define el aspecto de la página: `dark` y `large` activan las clases `ui-dark` y `ui-large` del body, `color` y cada otra clave se convierten en variables CSS de `:root` (`--color`, y `--rgb` se calcula a partir del color) en un único `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` define el nombre que prefija las claves de `localStorage`, la versión y el idioma (`DEF.localstorage`, `DEF.version`, `DEF.language`) y, con `env`, varios valores de `ENV()`.

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<p id="p">A paragraph</p>
	<div id="shown" style="width:300px;height:40px">Shown</div>
	<div id="hidden" style="display:none"><span id="inside">Inside</span></div>
	<div id="far" style="margin-top:3000px">Far away</div>
	<div id="box" style="width:200px;height:50px;overflow:auto"><div style="height:300px">tall</div></div>
	<ul id="list"><li id="a" data-id="a">a</li><li id="b" data-id="b">b</li><li id="c" data-id="c">c</li></ul>
	<ul id="diff"><li data-id="1">one</li><li data-id="2">two</li></ul>
</body>
</html>
```
