DOM Library - Demonstrationen und Beispiele

Diese Seite zeigt praktische Anwendungsbeispiele der DOM Library mit interaktiven Demos.

1. Grundlegende DOM-Manipulation

Demonstration der grundlegenden Funktionen: Element-Selektion, Text/HTML-Änderung, Attribute.

Ursprünglicher Text

Code:
// Text ändern
dom.get('#demo-text').text('Neuer Text!');

// HTML setzen
dom.get('#demo-text').html('<strong>Fetter Text</strong>');

// Klasse hinzufügen
dom.get('#demo-text').addClass('highlight');

2. Event-Handling

Demonstration von Event-Listenern und Interaktivität.

Eingabe wird hier angezeigt...

Code:
// Click Event
dom.get('#click-counter').on('click', function() {
  counter++;
  dom.get(this).text('Klick-Zähler: ' + counter);
});

// Input Event
dom.get('#live-input').on('input', function() {
  dom.get('#input-display').text(this.value);
});

3. Element-Erstellung und -Einfügung

Dynamische Erstellung und Einfügung von HTML-Elementen.

Code:
// Einfaches Element erstellen
let newDiv = dom.create('div', {
  className: 'dynamic-element',
  text: 'Dynamisch erstellt!'
});
dom.get('#container').append(newDiv);

4. Tab-System

Ein vollständiges Tab-System implementiert mit der DOM Library.

Inhalt von Tab 1

Dies ist der Inhalt des ersten Tabs. Hier können beliebige HTML-Elemente stehen.

Inhalt von Tab 2

Der zweite Tab kann völlig anderen Inhalt haben.

Inhalt von Tab 3

  • Listen
  • Funktionieren
  • Auch prima!
Code:
// Tab-Switching
dom.get('.tab').on('click', function() {
  let tabId = dom.get(this).attr('data-tab');
  // Alle Tabs deaktivieren
  dom.get('.tab').removeClass('active');
  dom.get('.content').removeClass('active');
  // Gewählten Tab aktivieren
  dom.get(this).addClass('active');
  dom.get('[data-content="' + tabId + '"]').addClass('active');
});

5. To-Do-Liste

Eine funktionale To-Do-Liste mit Hinzufügen, Abhaken und Löschen.

Code:
function addTodo() {
  let input = dom.get('.todo-input');
  let text = input[0].value.trim();
  if (text) {
    let todoItem = createTodoItem(text);
    dom.get('.todos').append(todoItem);
    input[0].value = '';
  }
}

6. Dynamische Galerie

Eine Bildgalerie, die dynamisch mit Daten befüllt wird.

Code:
// Galerie-Item erstellen
let item = dom.create('div', {
  className: 'gallery-item'
});
let caption = dom.create('div', {
  className: 'caption',
  text: 'Bildtitel'
});
item.append(caption);

7. Formular-Validierung

Einfache Formular-Validierung mit der DOM Library.

8. Performance-Demo

Demonstration der Performance bei vielen DOM-Operationen.

9. Einfache Tests

Grundlegende Tests zur Überprüfung der Library-Funktionalität.

Getestete Funktionen:
- Element-Selektion (ID, Klasse, Tag)
- DOM-Manipulation (Text, HTML, Attribute)
- CSS-Klassen-Management
- Element-Erstellung
- Method-Chaining

10. Wrapper-Funktionen Tests

Test der Wrapper-Funktionen mit der DOM Library.

DOM-Fixture - Live Demo Arena

Hier siehst du live, wie die Wrapper-Funktionen funktionieren:

Element 1 - Klick auf "wrap() Demo" um mich zu umschließen

Element 2 - Probiere die verschiedenen Wrapper-Funktionen aus

Kind 1 Kind 2 Kursiver Text
Live-Funktionen:
• wrap() Demo: Umschließt Elemente mit neuen Wrappern
• unwrap() Demo: Entfernt Wrapper-Elemente
• wrapInner() Demo: Umschließt Kinder eines Elements
• Reset: Stellt den ursprünglichen Zustand wieder her