JavaScript-Objekt extend div

Question

Wie ich es von Java Swing gewohnt bin, habe ich versucht, ein JavaScript-Objekt zu erstellen, das dem Dokument selbst hinzugefügt werden kann. Es sollte etwas wie folgt aussehen:

var customDiv = new MyDiv(); 
document.appendChild(customDiv); 

im Konstruktor des Objekts würde ich versuchen, so etwas wie

function MyDiv() { 
    this.innerHTML = "test"; 
} 

und die anderen Sachen für das Objekt.

So ist es möglich, Websites auf diese Weise mit JavaScript zu erstellen oder wie lösen Sie solche Probleme?

(würde Ich mag Elemente zu schaffen, die ein Objekt ist und alles, was mich wie Griff Ereignis-Listener tun, und das kann zu dem Dokument hinzugefügt werden.)

Answer 1

können Sie, aber ähnlich, wie Java Swing Methoden akzeptieren JPanel s oder andere Swing-Komponenten, eine Funktion wie appendChild akzeptiert Node-Objekte. Sie senden eine Funktion in appendChild, und wie würde es wissen, wie man es annimmt?

Beispiele Webseiten die Art und Weise der Erstellung Sie beschreiben:

var myDiv = document.createElement('div'); 
 
myDiv.id = "mydiv"; 
 
var myTextbox = document.createElement('input'); 
 
myTextbox.type = 'text'; 
 
myTextbox.value = 'some value'; 
 
myDiv.appendChild(myTextbox); 
 
document.body.appendChild(myDiv);

So können Sie die einzelnen DOM-Elemente erstellen und einen Verweis auf sie, ähnlich wie die Schaffung Instanz von Swing-Komponenten haben. Diese Elemente können Dinge wie div s, die ähnlich wie JPanel s oder input, ähnlich wie JTextField s verwendet werden. Und dann verwenden Sie diese Referenzen, um sie zu kombinieren, um eine GUI zu erstellen.

Um zu versuchen, zu veranschaulichen, wie document.createElement funktioniert, wie Sie in den Kommentaren immer noch verwirrt scheinen, vergleichen Sie es mit einer Java-Methode wie diese (Nur FYI, es könnte nicht streng genau sein, wie ich Swing in einer Weile nicht verwendet haben):

JComponent createComponent(string componentType) { 
    if(componentType.equals("JTextField")) { 
     return new JTextField(10); 
    } else if(componentType.equals("JFileChooser")) { 
     // return filechooser 
    } 
    //etc. 
} 

Wie Sie sehen können, wobei das Verfahren createComponent, Aufruf und einen String-Wert dessen, was Komponente, die Sie wollen, Sie gibt die aktuelle instanziiert leer Komponente bereitstellt. Sie haben keine Konstruktoren dafür definiert. Stattdessen lege ich einen Bezug darauf und mache damit, was du willst.