Chain

Eine Klasse, mit der sich das DOM in verketteten Aufrufen bearbeiten lässt: Elemente erzeugen, Attribute setzen, Ereignisse abonnieren und mehr.

API

Chain

Konstruktor

new Chain(tagName: string, options?: ElementCreationOptions)

Wichtigste Methoden

Methode	Beschreibung	Rückgabewert
`setAttribute`	Setzt ein Attribut am Element	`Chain`
`removeAttribute`	Entfernt ein Attribut vom Element	`Chain`
`append`	Hängt ein Kindelement an	`Chain`
`remove`	Entfernt ein Kindelement	`Chain`
`setTextContent`	Setzt den Textinhalt	`Chain`
`setStyle`	Setzt einen Stil	`Chain`
`addChild`	Hängt ein Kind an (auch ein Array)	`Chain`
`listen`	Meldet einen Ereignis-Listener an	`Chain`
`clearListener`	Meldet einen Ereignis-Listener ab	`Chain`
`clearAllListener`	Meldet alle Ereignis-Listener ab	`Chain`

Eigenschaften

Eigenschaft	Beschreibung	Typ
`element`	Das DOM-Element	`HTMLElement`

Beispiel

Grundlegende Verwendung

import { Chain } from 'ranuts';

const div = new Chain('div')
  .setAttribute('id', 'myDiv')
  .setAttribute('class', 'container')
  .setTextContent('Hello World')
  .setStyle('color', 'red');

document.body.appendChild(div.element);

Verkettung

import { Chain } from 'ranuts';

const button = new Chain('button')
  .setAttribute('type', 'button')
  .setTextContent('Klick mich')
  .setStyle('padding', '10px')
  .setStyle('background', 'blue')
  .listen('click', () => {
    console.log('Schaltfläche geklickt');
  });

document.body.appendChild(button.element);

Kindelemente anhängen

import { Chain } from 'ranuts';

const container = new Chain('div')
  .addChild(new Chain('h1').setTextContent('Überschrift'))
  .addChild(new Chain('p').setTextContent('Inhalt'));

document.body.appendChild(container.element);

Mehrere Kinder auf einmal anhängen

import { Chain } from 'ranuts';

const list = new Chain('ul').addChild([
  new Chain('li').setTextContent('Eintrag 1'),
  new Chain('li').setTextContent('Eintrag 2'),
  new Chain('li').setTextContent('Eintrag 3'),
]);

document.body.appendChild(list.element);

SVG-Elemente

import { Chain } from 'ranuts';

const svg = new Chain('svg').setAttribute('width', '100').setAttribute('height', '100');

const circle = new Chain('circle').setAttribute('cx', '50').setAttribute('cy', '50').setAttribute('r', '40');

svg.addChild(circle);

Hinweise

Verkettung: Alle Methoden geben die Chain-Instanz zurück, lassen sich also aneinanderhängen.
SVG: erkennt SVG-Tags von allein und erzeugt sie mit dem richtigen Namensraum.
Ereignisse: hält intern eine Zuordnung der Listener, was das Verwalten und Abmelden erleichtert.
Einsatz: üblich, um DOM-Strukturen zur Laufzeit aufzubauen und Oberflächen-Bausteine zusammenzusetzen.