自定义元素（custom elements）

来源：互联网发布：医院排号系统编程编辑：程序博客网时间：2024/06/06 04:09

浏览器将自定义元素保留在 DOM 之中，但不会任何语义。除此之外，自定义元素与标准元素都一致

事实上，浏览器提供了一个HTMLUnknownElement，HTMLElement对象，所有自定义元素都是该对象的实例。

   var tabs=document.createElement("tabs");   console.log(tabs instanceof HTMLUnknownElement);//true   console.log(tabs instanceof HTMLElement);//true

Custom Elements 标准:“自定义元素的名字必须包含一个破折号（-）
一旦名字之中使用了破折号，自定义元素就不是HTMLUnknownElement的实例了。

 var tabs=document.createElement("my-tabs");   console.log(tabs instanceof HTMLUnknownElement);//false   console.log(tabs instanceof HTMLElement);//true

Custom Elements 标准规定了，自定义元素的定义可以使用 ES6 的class语法

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body>      <my-element content="Custom Element">  Hello</my-element> </body></html><script>class MyElement extends HTMLElement {//自定义元素的定义可以使用ES6的class语法  get  content() {    return this.getAttribute('content');  }   set  content(val) {    this.setAttribute('content', val);  }}//原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数，第一个参数是自定义元素的名字，第二个参数是一个 ES6 的class。window.customElements.define('my-element', MyElement);window.onload=function(){//在页面元素加载完之后，才执行function customTag(tagName, fn){//Array.from（[arguments]）；可以将字符串，数组，类数组集合转化为数组  Array    .from(document.getElementsByTagName(tagName))    .forEach(fn);}function myElementHandler(element) {  element.textContent = element.content;}customTag('my-element', myElementHandler);};</script>

另外一个比较简单的例子：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style>    greeting{        display:block;         font-size:36px;        color:red;    }  </style>  <script>  window.onload = function() {            function customTag(tagName, fn){            console.log(document.getElementsByTagName("div"));            Array .from(document.getElementsByTagName(tagName)).forEach(fn);             }             function greetingHandler(element) {              element.innerHTML = '你好，世界';            }              customTag('greeting', greetingHandler);    }</script> </head> <body> <div></div>        <greeting>Hello World</greeting>        <greeting>Hello World</greeting>        <greeting>Hello World</greeting> </body></html>

其实更关心的是，HTML组件的开发，这是一个很好的雏儿。

h t t p s : / / d e v e l o p e r . mo z il l a .o r g / e n- U S / d o cs / W e b / J a va S c ri p t

阅读全文

0 0