JavaScript对象扩展div

时间:2016-12-21 20:12:54

标签: javascript html swing element document

由于我习惯使用Java Swing,我尝试创建一个可以添加到文档本身的JavaScript对象。它应该看起来像:

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

在对象的构造函数中,我会尝试像

这样的东西
function MyDiv() {
   this.innerHTML = "test";
}

和对象的其他东西。

用JavaScript可以用这样的方式创建网站,或者你如何解决这样的问题呢?

(我想创建元素,这是一个对象,并且像处理事件监听器一样自己做所有事情,并且可以添加到文档中。)

1 个答案:

答案 0 :(得分:0)

您可以,但类似于Java Swing方法接受appendChild或其他Swing组件的方式,像appendChild这样的函数接受Node对象。您正在将函数发送到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);,它将如何知道如何接受它?

以您描述的方式创建网站的示例:

div

因此,您创建单个DOM元素并引用它们,类似于创建Swing组件的实例。这些元素可以像JPanel一样使用,类似于inputJTextField,类似于document.createElement。然后使用这些引用将它们组合在一起以创建GUI。

试图说明JComponent createComponent(string componentType) { if(componentType.equals("JTextField")) { return new JTextField(10); } else if(componentType.equals("JFileChooser")) { // return filechooser } //etc. } 如何工作,因为你在评论中似乎仍然感到困惑,将它与这样的Java方法进行比较(仅供参考,它可能不是严格准确的,因为我没有使用Swing在一段时间内):

createComponent

正如您所看到的,调用方法{ "name": "my-website", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "^2.1.0", "@angular/compiler": "^2.1.0", "@angular/core": "^2.1.0", "@angular/forms": "^2.1.0", "@angular/http": "^2.1.0", "@angular/platform-browser": "^2.1.0", "@angular/platform-browser-dynamic": "^2.1.0", "@angular/router": "^3.1.0", "core-js": "^2.4.1", "rxjs": "5.0.0-beta.12", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }, "devDependencies": { "@angular/compiler-cli": "^2.1.0", "@types/jasmine": "^2.2.30", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.20-4", "codelyzer": "~1.0.0-beta.3", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "~2.0.3", "webdriver-manager": "10.2.5" } } 并为其提供所需组件的String值,将返回实际实例化的空组件。您没有为它定义任何构造函数。相反,你放置一个引用,并用它做任何你想做的事情。