JavaScript 对象扩展 div

Question

因为我从 Java Swing 习惯了它，所以我尝试创建一个 JavaScript 对象，它可以添加到文档本身。它应该看起来像：

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

在对象的构造函数中我会尝试类似

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

以及对象的其他内容。

那么是否可以使用 Java脚本以这样的方式创建网站，或者您如何解决这样的问题？

（我想创建元素，它是一个对象并自己完成所有事情，例如处理事件监听器，并且可以添加到文档中。）

Answer 1

可以，但类似于 Java Swing 方法接受 JPanel 或其他 Swing 组件的方式，appendChild 等函数接受 Node 对象。您将一个函数发送到 appendChild，它怎么知道如何接受它？

按照您描述的方式创建网站的示例：

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);

因此，您创建单独的 DOM 元素并引用它们，类似于创建 Swing 组件的实例。这些元素可以类似于 divs，可以类似于 JPanels 或 input，类似于 JTextFields。然后您使用这些引用将它们组合在一起以创建一个 GUI。

为了说明 document.createElement 是如何工作的，因为您在评论中似乎仍然感到困惑，请将其与这样的 Java 方法进行比较（仅供参考，它可能并不严格准确，因为我有一段时间没有使用 Swing):

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

如您所见，调用方法 createComponent，并向其提供您想要的组件的字符串值，returns 给您实际实例化的空组件。您没有为它定义任何构造函数。相反，您可以引用它，然后用它做任何您想做的事。

JavaScript 对象扩展 div

JavaScript Object extend div

html

javascript

swing

document

element