Startseite JavaScript Archive nach Kategorien "DOM"

Kategorie: DOM

[JavaScript] Übersicht vordefinierte Objekte und Typen

Übersicht: https://www.w3schools.com/js/js_datatypes.asp

Primitive (nur Werte und keine Properties oder Methoden)

Boolean: true / false

Number: repräsentiert Zahlen

Null: Nichts

String: repräsentiert Strings

Undefined: Variable ohne Wert hat den Wert „undefined“

Komplexe Datentypen (haben Properties oder Methoden, mit typeof abfragbar)

Array: Liste von Objekten

Date: Datumswerte

JSON: Objektdaten formatieren und transportieren

Math: mathematische Berechnungen

RegExp: repräsentiert reguläre Ausdrücken

Function: aufrufbarer Codeabschnitt

Object: haben Properties oder Methoden (alles außer Primitiven ist Object)

[JavaScript] Übersicht HTML DOM Objekte

console

document

location

navigator

screen

window

[JavaScript] DOM-Elemente lesen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Read</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
let h = document.getElementById("bodytext");
console.log(h.innerHTML);

// Zugriff über CSS-Ausdruck, erstes Element
let h = document.querySelector("#bodytext");
console.log(h.innerHTML);

// Zugriff über Tag, Liste
let arr = document.getElementsByTagName("div");
for (let e in arr)
{
  console.log(arr[e].innerHTML);
}

// Zugriff über CSS-Ausdruck, Liste
let arr = document.querySelectorAll("div");
for (let e in arr)
{
  console.log(arr[e].innerHTML);
}

[JavaScript] DOM-Elemente ändern 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Change</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
let h = document.getElementById("bodytext");
// Text setzen
h.innerHTML = "Testtext";
// Schrift setzen
h.setAttribute("style", "color:green; font-size:20px;");

[JavaScript] DOM-Elemente erzeugen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Create</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
// div-Tag erstellen
let d = document.createElement("div");
d.style.color = "red";

// Text im div erzeugen
let t = document.createTextNode("Testtext2");

// Text an div anhängen
d.appendChild(t);

// Element an body anhängen
document.body.appendChild(d);

[JavaScript] DOM-Elemente löschen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Delete</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
  <ul id="persons">
    <li id="p1">Udo</li>
    <li id="p2">Ede</li>
    <li id="p3">Heinz</li>
  </ul>
</body>
</html>

// ul ID="persons"
let persons = document.getElementById("persons");
// li ID="p2"
let p2 = document.getElementById("p2");
// Element entfernen
persons.removeChild(p2);

[JavaScript] Eventhandling

  • sich überlagernde Events werden vom innersten zum äußersten Element verarbeitet

Variante 1 (Funktionszuweisung im HTML)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button onclick="btnClick();">Klick</button>
</body>
</html>

// Funktionsdefinition
function btnClick(){
  alert("Test");
}

Variante 2 (Registrierung des Listeners im JS)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button id="btn1">Klick</button>
</body>
</html>

// Button mit ID="btn1" holen
let b = document.getElementById("btn1");

// Funktionsdefinition
let btnClick = function(){
  alert("Test");
}

// Funktionszuweisung
b.onClick = btnClick;
// Listener hinzufügen
b.addEventListener("click", btnClick);
// Listener wieder entfernen
b.removeEventListener("click", btnClick);

[JavaScript] DOM: Buttonklick realisieren 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;">
  <title>DOM Buttonclick</title>
  <script>
  // Strict mode
  'use strict';

  // https://wiki.selfhtml.org/wiki/JavaScript/Module_und_Kapselung
  // private Scope deklarieren
  // anonyme Funktion 1
  (
      // anonyme Funktion 2
    function ()
    {
      // Initialisierung
      function init() {
        let btn = document.getElementById('btnTestButton');

        if (btn) {
          btn.addEventListener(
            "click",
            function () { txtout(); }
          );
        }
      }

      // Textausgabe
      function txtout() {
        let txt = document.getElementById("textfeld");
        if (txt) {
          txt.innerHTML = "Test1";
        }
      }

      // Event-Listener
      document.addEventListener(
        "DOMContentLoaded",
        function () { init(); }
      );
    }
    
    // Aufruf der inneren anonymen Funktion 2
    ()
  );
  </script>
</head>
<body>
    <p>Button klicken!</p>
    <button type="button" id="btnTestButton">Klick!</button>
    <div id="textfeld"></div>
</body>
</html>