html中创建div的快捷键,如何创建普通的HTML元素-CSDN博客

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

document.registerElement

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

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

constructor：返回值，构造函数原型

tag-name：自定义标签名，必须有一个连字符(-)，例如my-tag，用于区分自定义HTML元素与标准HTML元素

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