如何创建普通的HTML元素

本文主要介绍如何创建一个自定义的HTML元素以及定义它们的API

document.registerElement

通过document.registerElement可以在浏览器中注册一个自定义元素：

var constructor = document.registerElement(tag-name, options);

1. constructor：返回值，构造函数原型
2. tag-name：自定义标签名，必须有一个连字符（-），例如my-tag，用于区分自定义HTML元素与标准HTML元素
3. options：可选，constructor的原型对象

自定义元素

var Mytag = document.registerElement('my-tag'); document.body.appendChild(new Mytag());

上面代码创建了一个自定义标签，然后就会添加到body末尾

为自定义元素添加API

通过var MytagProto = Object.create(HTMLElement.prototype);创建一个新的对象，这个对象就会继承标准HTML元素的方法和属性

可以自定义方法和属性，如

`
 MytagProto.hello = function(val) {
 alert(val);
 }
 
 
Object.defineProperty(MytagProto, 'title', {
 value: 'mg tag',
 writable : true
 });
 `

调用document.registerElement设置属性

var Mytag = document.registerElement('my-tag', { prototype: MytagProto }); var mytagEle = new Mytag(); document.body.appendChild(mytagEle); var title = mytagEle.title; mytagEle.hello(title);

参考链接：http://blog.teamtreehouse.com/create-custom-html-elements-2