Startseite Beiträge getaggt mit "Document"

Schlagwort: Document

[jQuery] Eventhandler registrieren 

// https://www.w3schools.com/jquery/jquery_events.asp

// Beispiel ($(document).ready)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// mehrere Eventhandler für ein Objekt registrieren
$(document).ready(function(){
    $("#p1").on({
    	mouseenter : function(){
            $(this).html("Entered");
    	},
    	mouseleave : function(){
            $(this).html("Left");
    	}
		})
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>

[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 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>

[Java] XML-Datei speichern 

import java.io.File;
import java.io.IOException;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NamedNodeMap;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

/**
 * Datei im XML-Format (*.xml) speichern
 * @param filename Dateiname
 * @return true, wenn Speichern erfolgreich
 */
public boolean SaveXML(String filename)
{
    boolean bRetVal = false;

    try
    {
        File f = new File(filename);
        
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        DocumentBuilder builder = factory.newDocumentBuilder();
            
        // root
        Document doc = builder.newDocument();
        Element root = doc.createElement("root");
        doc.appendChild(root);

            // <value>1.0</value>
            Element v = doc.createElement("value");
            v.appendChild(doc.createTextNode("1.0"));
            root.appendChild(v);
        
            for (int i = 0; i < 10; i++)
            {
                // <type value="0"/>
                Element t = doc.createElement("type");
                t.setAttribute("value", Integer.toString(i));
                root.appendChild(t);
                
                for (int j = 0; j < 10; j++)
                {
                    // <type_value v1="0" v2="0"/>
                    Element tv = doc.createElement("type_value");
                    tv.setAttribute("v1", Integer.toString(i+j));
                    tv.setAttribute("v2", Integer.toString(i*j));
                    raster.appendChild(tv);
                }
                //</type>
            }
                        
        // write xml
        Transformer transformer = TransformerFactory.newInstance().newTransformer();
        //transformer.setOutputProperty(OutputKeys.OMIT_XML_DECLARATION, "yes");
        transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
        //transformer.setOutputProperty(OutputKeys.INDENT, "yes");
        transformer.transform(new DOMSource(doc), new StreamResult(f));

        bRetVal = true;
    }
    catch (Exception e)
    {
        bRetVal = false;
    }
    finally
    {
    }
    
    return bRetVal;
}

[Java] XML-Datei laden 

import java.io.File;
import java.io.IOException;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NamedNodeMap;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

/**
 * Datei im XML-Format (*.xml) laden
 * @param filename Dateiname
 * @return true, wenn Laden erfolgreich
 * @throws IOException 
 */
public boolean LoadXML(String filename) throws IOException
{
    boolean bRetVal = false;

    try
    {
        File f = new File(filename);
        
        if (f.isFile() && f.canRead())
        {
            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); 
            DocumentBuilder builder = factory.newDocumentBuilder(); 
            Document doc = builder.parse(f);
            Node root = doc.getDocumentElement();
            root.normalize();
            
            if (root != null)
            {
                if (root.hasChildNodes())
                {
                    // Liste mit allen Elementen mit dem Bezeichner "item"
                    NodeList items = doc.getElementsByTagName("item");
                    
                    for (int i = 0; i < items.getLength(); i++)
                    {
                        Node item = items.item(i);
                        
                        // nodevalue, e.g. "0.5" or "Paul"
                        String nv = item.getNodeValue();
                        // nodename, e.g. <item>
                        String nn = item.getNodeName();
                        
                        // childs
                        NodeList childs = item.getChildNodes();
                        // attributes
                        NamedNodeMap attr = item.getAttributes();
                        
                        ...
                    }
                }
            }
            
            bRetVal = true;
        }
    }
    catch (Exception e)
    {
        bRetVal = false;
    }
    finally
    {
    }
    
    return bRetVal;
}