# Ajutoare DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM și APPEARANCE

> Citește atribute data, întreabă dacă un element este afișat sau pe ecran, adaugă stiluri pe care le poți înlocui, mută elemente în părintele lor, actualizează o listă fără să o redesenezi și setează culorile și modul întunecat al paginii.

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

- `ATTRD(element or event, [name])` citește `data-<name>` (implicit `data-id`) al unui element, al unui obiect jQuery sau al elementului unui eveniment; pentru un obiect simplu citește proprietatea.
- `HIDDEN(element)` este `true` când elementul nu este afișat (el sau un părinte are `display: none`; **un element care este copil direct al body este raportat întotdeauna ca nefiind ascuns**, verificarea începe de la părintele lui); `VISIBLE(element, [threshold], [mode])` este `true` când este în partea vizibilă a ferestrei (`mode` `'above'` sau `'below'` întreabă unde se află când nu este). `NOTFOCUSED()` este `true` când fila browserului este în fundal, iar `inDOM(element)` este adevărat cât timp elementul este în document.
- `WIDTH([element])` returnează clasa de mărime a lățimii elementului (implicit: fereastra): `'xs'`, `'sm'`, `'md'` sau `'lg'` (limitele sunt în `DEF.devices`). `WW` și `WH` sunt dimensiunea ferestrei; `$W` este obiectul jQuery al ferestrei; `SCROLLBARWIDTH()` este lățimea pe care o ocupă o bară de derulare.
- `SCROLLBAR(element, [options])` învelește un element cu o bară de derulare personalizată și îl returnează; `scrollbar.resize()` o recalculează după ce conținutul s-a schimbat.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` și `isIE` sunt booleeni despre browser, setați când pornește pagina.
- `STYLE(css, [id], [selector])` adaugă un `<style>` în head. Cu un `id`, stilul este înlocuit când îl apelezi din nou cu același id; cu un `selector`, fiecare regulă este învelită de el (`'.a { }'` devine `'#p .a{ }'`).
- `NODEINDEXOF(element)` este poziția elementului printre frații săi, `NODEINSERT(element, reference, [before])` mută un element după (sau înaintea) altuia, iar `NODEMOVE(element, [up])` îl mută un loc în jos (sau în sus).
- `DIFFDOM(parent, selector, html, [attribute])` face copiii lui `parent` care se potrivesc cu `selector` identici cu cei din `html`, **fără a redesena** pe cei care există deja: un element este același când `attribute` are aceeași valoare (fără `attribute`, când tot HTML-ul lui este la fel). Elimină cei care nu sunt în lista nouă, adaugă pe cei noi și îi pune în ordinea lui `html`, și returnează `{ add, upd, rem }`. Conținutul unui element păstrat **nu** este înlocuit.
- `APPEARANCE({ color, dark, large, <name>: value })` setează aspectul paginii: `dark` și `large` comută clasele `ui-dark` și `ui-large` ale body, `color` și orice altă cheie devin variabile CSS ale lui `:root` (`--color`, iar `--rgb` este calculat din culoare) într-un singur `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` setează numele care prefixează cheile din `localStorage`, versiunea și limba (`DEF.localstorage`, `DEF.version`, `DEF.language`) și, cu `env`, mai multe valori `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>
```
