html&css&js&dom树到底是什么关系
HTLM应该是超文本标记语言不是协议，HTTP那东西才是协议,js和javascript实际上是一样的，javascript简称叫
js ， JScript 是 微软出的 跟javascript差不多，现在都叫JS了，HTML/CSS/javascript
W3C都有制作规范与标准。dom树是属于javascript的一部分,javascript大体包含3个西:ECMAScript语法(在此基础上建立的javascript语法,还如FLASH的ActionScript也基于ECMAScript扩展的),DOM对象（文档），BOM对象（浏览器）.
而DOM对象的出现是为了方便javascript操作HTML标签而已.BOM对象也就是操作浏览器了.标准的HTML文档实质上就是一个是就一个树形结构的XML文档
DOM全名document object model
文档对象模型，也就是基于HTML文档出来的，所以操作DOM实际上就是在操作HTML文档对象(每一个标签).
CSS只能修饰HTML的样式而已，而javascript能把HTML与CSS相结合，也就是以前所说的DHTML（动态HTML）。
http只是传输协议，没他的话网站都打不开了。
html这套标签机制也是又W3C规范的，每个浏览器对CSS，HTML，JS的解析都存在问题，所以当时就出现了W3C这个民间的组织，重点是民间组织，O(∩_∩)O哈哈~，组成就是为了说服各大浏览器厂商统一解析CSS，HTML，JS,目前各大浏览器厂商对标准支持的越来越好了（IE最差，可能有钱有势吧，老弄些IE特有属性与方法，而不采用DOM核心方法），但是还是存在差异，希望开发者再也不用为浏览器兼容考虑那一天的到来。&
文章二《CSS、HTML、JS、XML的关系》
在网上有告诉你是什么、HTML是什么、JS是什么、XML是什么之类的文章，并且多如牛毛。但是他们一般都没有具体告诉你，它们之中的任意一个或几个结合起来用会是什么或什么效果（请注意：我所指的是它们具体说是以一种什么样的方式结合，并不一定是结合的新产物新名词）。所以出于这种目的，Monyer手写了这篇文章，虽然我参考并综合了诸多文献资料，但仍免不了由于个人偏见及学术问题所引起的诸多谬误，所以如果您有任何问题欢迎批评指教，以便Monyer对文章进行及时更正，以免混淆视听。谢谢！
在文章开始，我认为有必要先分别说说这四项技术都是什么，都能干什么。
HTML是什么：HTML是Hypertext Markup
Language的缩写，即超文本标记语言。它是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建Web页面。HTML文件是带有格式标识符和超文本链接的内嵌代码的ASCII
文本文件。用Monyer的话说，HTML就是做网页结构及内容实现的一门语言。
下面这段代码是HTML的基本结构，在“&&”中的为HTML标记，一般一个“&xxx&”标记出现，则必需要一个相应的
“&/xxx&”对其标示范围进行结束；除非该标记为自关闭标记，一般以“&xxx/&”的形式出现。
&title&Monyer's
Example&/title&
id="first"&Hello World
id="second"&Hello Monyer
如果把网页（&html&...&/html&）看成是人的话，那么&head&...&
/head&是他的头，但这部分内容通常不会在网页正文中显示；&body&...&/body&是他的身体，也是一个网页内容显示部分。所以将以下代码保存为*.html后并双击在网页浏览器中运行，显示的仅仅是：
Hello World
Hello Monyer
但所有的HTML标记均是被浏览器执行的对象，并不会显示出来。需要注意的是，在上段代码中承载“Hello
World ！”和“Hello Monyer
！”的两个“&div/&”容器内部均有一个id标识，id中的内容是可以随便定制的，但请务必保证id中内容的唯一性——因为它是使别人找到它所在的门牌号。
CSS是什么：CSS是Cascading Style Sheet
的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言（节选自《css2.0中文手册》）
。如果用|\/|0|\|YE|2的话说，CSS就是定制一个网页上HTML元素属性的语言。
CSS的大概模样如下：
font-size:50
当把以上代码放进HTML中，它会去尝试找ID（门牌号）为“first”的HTML标签，如果找到，就把该标签内的文字以红色在浏览器中显示出来；当它继续寻找ID为“second”的标签，并找到后，它会把该标签内部的文字以绿色在浏览器中显示出来，但同时该段文字的大小为50像素。具体的插入HTML的方法后文会提到。
JS是什么：JS是Javascript的缩写。JavaScript是一种基于对象
(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java
脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。用|\/|0|\|YE|2的话说，网页中所有的对数据进行判断、操作以及向浏览者反馈信息的本地代码实现部分均是javascript（当然，由于我们仅仅局限于目前的这四种语言，所以在狭义的角度上，我们不考虑vbs或Java
Applet等脚本语言。请不要总是钻别人的牛角尖哦！呵呵）
JS的大概样子如下：
function a(){
alert('example');
当把以上代码放进HTML代码中，它会在你的HTML载入时，弹出一个内容为“example”的对话框。同样，具体的插入方法会在后文给出。
XML是什么：XML 代表Extensible Markup Language（eXtensible
Language的缩写，意为可扩展的标记语言）。XML是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言，即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。Monyer的小提示：rss就是xml的一种特殊形式，你也可以理解xml就是数据库。
XML的大概样子如下：
&bcd&1&/bcd&
&bcd&2&/bcd&
&bcd&3&/bcd&
从以上代码你可以看出它跟HTML很像，但是区别在于它的标签名称是可以随意定制的，这意味着对于同一段数据，不同的程序员会编出不同的XML代码。也因此在rss的xml应用中，标签被固定下来以适合信息交互。相对HTML来说，XML更追求严谨性，如果说你在HTML代码中没有对标签进行一一对应或是封闭，但是却蒙混过关的话；那么同样的事情发生在XML中就很可能会使你的数据崩溃。
好了，以上便是对这四种语言的简要介绍，下来来看幅图，提前声明的是语言连线所产生的部分并不一定代表是另外一门语言或是新技术，它仅仅代表两种或多种语言会以一种什么样的方式相结合，它们结合后的关系如何（汗！没办法，现在没事挑刺的人特多，所以我还是认为提前声明一下比较保准！嘿嘿）——这也正是本文所要讨论的重点。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/neler/pic/item/ea00b2ca4f82.jpg" SMALL="0"
ALT="html&css&js&dom树到底是什么关系"
TITLE="html&css&js&dom树到底是什么关系" />
DOM是什么：这里的DOM指的是HTML DOM。HTML
DOM是W3C的标准，同时它也是HTML的文档对象模型的缩写(the Document Object Model for
HTML)。HTML
DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。其中的内容可以修改和删除，同时也可以创建新的元素。HTML
DOM独立于平台和编程语言。它可被任何编程语言诸如Java、JavaScript和VBScript所使用。用Monyer的话说，HTML
DOM就是HTML语言对外界开通的接口，以便其他语言能够访问或修改HTML内部的元素。
当js需要对html元素进行操作时，DOM是一个很必要的对象。
js一般会以三种方式插入到HTML当中：
方法1：&script&js
code&/script&
方法2：&script
language="javascript" src="js
source.js"&&/script&
方法3：&body
onload="simple js
code"&...&/body&
当然，看过我的XSS的相关文章的朋友知道其实插入js的方式不仅仅这些，但是这些其实才是最基本的。
而譬如你要在“代码一”刚一载入时，就改变其中的元素，使ID为“first”的DIV中的内容也为“Hello
Monyer ！”
你便可以通过利用DOM对象构造如下代码并插入到HTML代码中的任何位置来实现
window.onload=function
document.getElementByIdx_x("first").innerHTML="Hello Monyer
STYLE（样式）：当用CSS去修饰HTML中的元素，这一过程可以称为声明HTML元素样式的过程。同js一样，CSS插入HTML也有与之类似的三种方法：
方法一：&style&css
code&/style&
方法二：&link
rel="stylesheet" type="text/css" href="css source.css"
方法三：&div
style="css
code"&...&/div&
XHTML是什么：XHTML是The Extensible HyperText Markup
Language(可扩展超文本标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML
的强大功能及大多数HTML的简单特性。
简单的说，xhtml比html要严谨些，但又没像xml那么严重——譬如所有的xhtml标签以及属性必须要小写，属性性必须要加双引号（当然如今的浏览器不管是IE还是FF，对html和xhtml采取兼容措施，这也是XSS产生的根本原因），而且也可以像xml一样自定义部分标签，因此有了极大的灵活性。
而且进入了xhtml时代，大家倡导的是CSS+DIV，这也是web2.0的基础。
DHTML是什么：DHTML只是一种制作网页的概念，实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范，DHTML只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。DHTML
就是动态的html，Dynamic HTML
。传统的html页面是静态的，Dhtml就是在html页面上加入了javascript脚本，使其能根据用户的动作作出一定的响应，如鼠标移动到图片上，图片改变颜色，移动到导航栏，弹出一个动态菜单等等。
一般如：&img src="pic
source" onmouseover="this is a picture
Expression是什么：Expression是微软为了使样式表能够在修饰HTML样式的同时执行javascript脚本而在IE浏览器中增加的一个功能（在加入该功能不久，FF也增加了该功能，不过仅仅支持很简单的js表达式），这样你可以做譬如：图片的自适应宽度，表格的隔行换色等等。
譬如：img{max-width:500width:expression_r(document.body.clientWidth
& 500 ? "500px" : "auto");}
XMLHTTP是什么：最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)
向http服务器发送请求并使用微软XML文档对象模型Microsoft& XML Document Object Model
(DOM)处理回应。
现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象（在IE7中已经支持通过xmlhttprequest来创建xmlhttp对象），其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。
一个简单的定义IE的xmlhttp的对象及应用的实例如下：
var XmlHttp=new
ActiveXObject("Microsoft.XMLhttp");
XmlHttp.Open("get","url",true);
XmlHttp.send(null);
XmlHttp.onreadystatechange=function
ServerProcess(){
(XmlHttp.readystate==4 ||
XmlHttp.readystate=='complete')
alert(XmlHttp.responseText);
XSLT是什么：XSLT的英文标准名称为eXtensible Stylesheet Language
Transformation。根据W3C的规范说明书()，最早设计XSLT的用意是帮助XML文档(document)转换为其它文档。但是随着发展，XSLT已不仅仅用于将XML转换为HTML或其它文本格式，更全面的定义应该是：XSLT是一种用来转换XML文档结构的语言。
这里不对XSLT进行举例，关于XSLT的基础详情请参看《XSLT轻松入门》。
SGML是什么：SGML——标准通用标记语言（standard generalized markup
language）。由于SGML的复杂，导致难以普及。这是一个SGML的例子：typically something like
this 。同时SGML也是一个ISO标准: "ISO
Information processing --
Text and office systems -- Standard Generalized Markup Language
(SGML)" SGML有非常强大的适应性，也正是因为同样的原因，导致在小型的应用中难以普及。HTML 和 XML
同样衍生于SGML：XML可以被认为是SGML的一个子集，而HTML是SGML的一个应用。XML的产生就是为了简化SGML，以便用于更加通用的目的。比如语义Web.它已经应用于大量的场合，比较著名的有XHTML
、RSS 、XML-RPC 和SOAP 。
XSL-FO是什么：XSL在转换XML文档时分为明显的两个过程，第一转换文档结构；其次将文档格式化输出。这两步可以分离开来并单独处理，因此XSL在发展过程中逐渐分裂为XSLT(结构转换)和XSL-FO(formatting
objects)(格式化输出)两种分支语言，其中XSL-FO的作用就类似CSS在HTML中的作用。
AJAX是什么：终于到了最后这个爆炸式的东东了，这可是个重头戏，web2.0思想的核心。CSS+HTML+JS+XML+DOM+XSLT+XMLHTTP==AJAX。AJAX全称为“Asynchronous
JavaScript and
XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。
在AJAX中，xmlhttp用来在不改变页面的情况下传输数据，其中传输的数据即是XML，然后通过XSLT将其格式化，利用js通过dom对象将其显示到HTML中，同时利用CSS确定数据的显示及位置。
在2006年，是否掌握AJAX技术是对一个网站工程师水平的鉴定。07年，这项技术事实上已经延伸到了网络中的任何一个角落，譬如你的博客，你的网络邮箱，譬如某些搜索引擎，c2c平台等等。
总结：好啦，文章到这里就告一段落，我数了数，7000多字了哦，好像是我博客里原创的最多的一篇了。我从下午四点多一直打到现在九点多，晚饭还没有吃，希望你们能认认真真地读完这篇文章——因为它对你们对于网站建设（将来成为网站工程师哦）的理解至关重要，也会使你们在网站建设上少走一些弯路。文中对于“名词”定义的部分，为了追求严密性和完整性，我没有按自己的意识乱来，而是取各家之所长，再根据自己对它的理解进行相关补充结合来的产物，在此声明一下，以免有照抄之嫌。
本文参考文献：《Professional
AJAX》《XSL简明教程》《XSLT轻松入门》《css2.0中文手册》等。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。html中的name和id有什么区别不同？一般情况下使用哪个？还是两个都用？_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
html中的name和id有什么区别不同？一般情况下使用哪个？还是两个都用？
我有更好的答案
同一时间只能选中一个radio、select、textarea.inputID 或 document.all.frameID 除去与表单相关的元素，只能赋id不能赋name，这些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等，通常先得到包含控件的form，例如document.Params取得元素提交的值。在form里面，如果不指定name，就不会发送到服务器端;INPUT id=myId&& script
language =&quot，我们就获得了一个页面锚点，如&lt，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组.frames(&frameName&quot。2）HTML元素Input type=&#39;input id=&MyInput&&&/element&JavaScript&quot、h1、li等元素一般用id。3）建立页面中的锚点，我们知道&a href=&quot。当然HTML元素的name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中。这是什么意思啊; CONTENT = &Dave Raggett&&、框架元素(&#39;)为元素添加Name属性。与表单相关的元素也可以赋ID值、 window的名字，用于在其他frame或window指定target )和button等，这些元素都与表单(框架元素作用于form的target)提交有关;&1&&&/ & INPUT name = & myName & &gt.forms[0]，然后从form再引用name与id 区别 id要符合标识的要求，详见 示例4）作为对象的Identity，如Applet、Object，如，则用document.getElementById(&myName&PARAM NAME = &appletParameter&quot..&来添加其N消息框里显示的结果是：&INPUT id=myId name=myName&a&Experience (XP)&a name=&PageBottom&&&&#47、td、div、p、span。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时; alert(input.outerHTML)。例如上面的input，要在脚本中获得输入的内容;META NAME = &quot，最好不要包含下划线（因为不兼容CSS）;strong&gt， 在表单的接收页面只接收有name的元素,
所以赋ID的元素通过表单是接收不到值的。 我们可以在服务器端根据其Name通过RMy Input&lt，我们将使用其name来引用该对象。5）在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap=&#name& id=&
for属性指定与label关联的元素的id./ script &消息框里显示的结果是，meta和param。例如为Object定义参数&(被关联的MAP元素的Name)。6）某些特定元素的属性，如attribute、Embed等元素。比如在Applet对象实例中;.，浏览器会根据name来设定发送到服务器的&) 赋id时，引用元素的方式:&myName&#39;。而name基本上没有什么要求，甚至可以用数字。table、tr，不可用name替代3）脚本中获得对象：IE支持在脚本中直接以id（而不是name）引用该id标识的对象;/label&a&是获得一个页面超级链接，如果不用href属性，而必须在创建Element时，使用document，这个分组就是根据相同的name属性来实现的;&lt.outerHTML);&&#47、INPUT&#39; &
document.createElement(&#39;)， 作为可与服务器交互数据的HTML元素的服务器端的标示.value来获得。如果用DOM的话; input.id
&#39;myId&#39;; alert( VALUE = &value&
&lt：& type=& &#39.formName.inputName 或 document，比如大小写敏感;);/strong&,
但为这些元素赋ID值的时候引用这些元素的方法就要变一下了，具体的如下： 赋name时，引用元素的方式:
document：&lt，比如input？看下面的例子就明白了。& script
language =&quot，不能简单的使用赋值element.name = &;MyInput&).value；如果要用name的话;radio&#39;URL&&link&/ input.id
&#39;myId&#39;text&quot，可以直接以 MyI script &gt.name
&#39;JavaScript&a name=&1&quot，注意这样得到的是经过计算后将发送给服务器的值name的用途1）主要是用于获取提交表单的某表单域信息;a&.createElement(&#39;&element name = &分组，我们知道radio button控件在同一个分组类，check操作是mutex的;& &
document.createElement(&#39，而改用name，如
&label for=&MyInput&Author&quotHTML 中 id与name 区别:一个name可以同时对应多个控件;或Meta中&lt，比如checkbox和radio而id必须是全文档中唯一的id的用途 1） id是HTML元素的Identity，主要是在客户端脚本里用。2） label与form控件的关联
采纳率：59%
还有一个地方要用ID，那就是CSS样式中，#样式需要用赋值ID获得该样式。，作为参数的变量名提交，向服务器提交一个表单元素，实际上只提交两个属性，name和value，那完全可以都不定义。。
所以用法区别就是，都是用来唯一确定对象的。一般JS要查找某个元素。。，如果某标签需要JS进行操作。。ID就是对象的唯一标示，在所有编程里，那就需要定义ID，如果需要提交服务器，就定义name，如果两件事都没有，ID不可以，id这时候就没用了。。name通常用来提交表单。。，需要用ID来查找，这时这个标签要定义id属性，这个必须要唯一。，名字则可以同名
一起都可用
为您推荐：
其他类似问题
您可能关注的内容
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;Hi，亲爱的小伙伴！
欢迎来到社区!
Tools Online | 在线开发工具
RankList | 热门文章
扫码关注 PHP1 官方微信号
Recommend | 推荐阅读
| 中国最专业的PHP中文社区 |
Copyright (C) 1998 - . All Rights Reserved
第一PHP社区本文翻译自 ，在保证技术要点表达准确的前提下，行文风格有少量改编和瞎搞。
注意！这篇文章介绍的 API 尚未完全标准化，并且仍在变动中，在项目中使用这些实验性 API 时请务必谨慎。
现在的 web 严重缺乏表达能力。你只要瞄一眼“现代”的 web 应用，比如 GMail，就会明白我的意思。
看看这一坨 DIV，这也叫现代？然而可悲的是，这就是我们构建 web 应用的方式。难道 web 开发就不能追求更粗更硬更长……哦不对，是更高更快更强的奥林匹克精神？
用时髦标记整点儿像样的
HTML 为我们提供了一个完美的文档组织工具，然而 定义的元素却很有限。
假如 GMail 的标记不是那么糟糕，结果会怎样？
&hangout-module&
&hangout-chat from="Paul, Addy"&
&hangout-discussion&
&hangout-message from="Paul" profile="profile.png" profile="" datetime="T12:02"&
&p&Feelin' this Web Components thing.&/p&
&p&Heard of it?&/p&
&/hangout-message&
&/hangout-discussion&
&/hangout-chat&
&hangout-chat&...&/hangout-chat&
&/hangout-module&
亮瞎狗眼颠覆三观！这清晰的结构，不识字也看得懂啊！最爽的是，它还有很强的可维护性，只要瞧一眼它的声明结构就可以清楚地知道它到底要干嘛。
赶紧开始吧
允许开发者定义新的 HTML 元素类型。该规范只是 模块提供的众多新 API 中的一个，但它也很可能是最重要的一个。缺少自定义元素带来的以下特性，web 组件根本玩不转：
定义新的 HTML/DOM 元素
基于其他元素创建扩展元素
给一个标签绑定一组自定义功能
扩展已有 DOM 元素的 API
注册新元素
使用 document.register() 可以创建一个自定义元素
var XFoo = document.register('x-foo');
document.body.appendChild(new XFoo());
document.register() 的第一个参数是标签名，这个标签名必须包括一个连字符（-）。因此，诸如 &x-tags&、&my-element&、 &my-awesome-app& 都是合法的标签名，而 &tabs& 和 &foo_bar& 则不是。这个限定使解析器能很容易的区分自定义元素和 HTML 规范定义的元素，同时确保了 HTML 增加新标签时的向前兼容。
第二个参数是一个可选（译注：经测试，Chrome 29 中不能省略第二个参数）的对象，用于描述该元素的原型。在这里可以为元素添加自定义功能（公开属性和方法）。这个到
一节再细说。
自定义元素默认会继承 HTMLElement 的原型，因此上一个示例等同于：
var XFoo = document.register('x-foo', {
prototype: Object.create(HTMLElement.prototype)
调用 document.register('x-foo') 向浏览器注册了这个新元素，并返回一个可以用来创建 &x-foo& 元素实例的构造器。如果你不想使用构造器，也可以使用其他的技术。
提示：如果你不希望在 window 全局对象中创建元素构造器，还可以把它放进命名空间：
var myapp = {};
myapp.XFoo = document.register('x-foo');
扩展原生元素
假设原生 &button& 元素不能满足你的需求，你想将其增强为一个“超级按钮”，可以通过创建一个继承 HTMLButtonElement 原型的新元素，来扩展 &button& 元素：
var MegaButton = document.register('mega-button', {
prototype: Object.create(HTMLButtonElement.prototype)
这类自定义元素被称为类型扩展自定义元素。它们以继承一个特定的 HTMLElement 的方式表达了“元素 X 是一个 Y”。
&button is="mega-button"&
元素如何提升
你有没有想过为什么 HTML 解析器不会对不是规范定义的标签报错？比如我们在页面中声明一个 &randomtag&，一切都很和谐。根据 的表述，非规范定义的元素将使用 HTMLUnknownElement 接口。&randomtag& 不是规范定义的，它会继承自 HTMLUnknownElement。
对自定义元素来说，情况就不一样了。拥有合法元素名的自定义元素将继承 HTMLElement。你可以打开控制台（不知道快捷键的都滚粗……），运行下面这段代码，看看结果是不是 true：
// “tabs”不是一个合法的自定义元素名
document.createElement('tabs').__proto__ === HTMLUnknownElement.prototype
// “x-tabs”是一个合法的自定义元素名
document.createElement('x-tabs').__proto__ == HTMLElement.prototype
注意：在不支持 document.register() 的浏览器中，&x-tabs& 仍为 HTMLUnknownElement。
unresolved（未提升）元素
由于自定义元素是由 JavaScript 代码 document.register() 注册的，因此它们可能在元素定义被注册到浏览器之前就已经声明或创建过了。比如你可以先在页面中声明 &x-tabs&，再调用 document.register('x-tabs')。
在被提升到其定义之前，这些元素被称为“unresolved 元素”。它们是拥有合法自定义元素名的 HTML 元素，只是还没有注册成为自定义元素。
下面这个表格看起来更直观一些：
unresolved 元素
HTMLElement
&x-tabs&、&my-element&、&my-awesome-app&
HTMLUnknownElement
&tabs&、&foo_bar&
实例化元素
我们创建普通元素用到的一些技术也可以用于自定义元素。和所有标准定义的元素一样，自定义元素既可以在 HTML 中声明，也可以通过 JavaScript 在 DOM 中创建。
声明元素：
&x-foo&&/x-foo&
在 JS 中创建 DOM：
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
使用 new 操作符创建实例：
var xFoo = new XFoo();
document.body.appendChild(xFoo);
实例化类型扩展元素
实例化类型扩展自定义元素的方法和普通自定义标签惊人的相似。
&!-- &button& “是一个”超级按钮 --&
&button is="mega-button"&
在 JS 中创建 DOM：
var megaButton = document.createElement('button', 'mega-button');
// megaButton instanceof MegaButton === true
看，这是一个接收第二个参数为 is 属性值的 document.createElement() 重载。
使用 new 操作符：
var megaButton = new MegaButton();
document.body.appendChild(megaButton);
现在，我们已经学习了如何使用 document.register() 来向浏览器注册一个新标签。但这还不够，接下来我们要向新标签添加属性和方法。
添加 JS 属性和方法
自定义元素最强大的地方在于，你可以在元素定义中加入属性和方法，给元素绑定特定的功能。你可以把它想象成一种给你的元素创建公开 API 的方法。
下面是一个完整的示例：
var XFooProto = Object.create(HTMLElement.prototype);
// 1. 为 x-foo 创建 foo() 方法
XFooProto.foo = function() {
alert('foo() called');
// 2. 定义一个只读属性 "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});
// 3. 注册 x-foo
var XFoo = document.register('x-foo', {prototype: XFooProto});
// 4. 创建一个 x-foo 实例.
var xfoo = document.createElement('x-foo');
// 5. 插入页面
document.body.appendChild(xfoo);
构造原型的方法多种多样，如果你不喜欢上面这种方式，还有一个更简洁的例子：
var XFoo = document.register('x-foo', {
prototype: Object.create(HTMLElement.prototype, {
get: function() { return 5; }
value: function() {
alert('foo() called');
以上两种方式，第一种使用了 ES5 的 ，第二种则使用了 。
生命周期回调方法
元素可以定义特殊的方法，来注入其生存期内关键的时间点。这些方法各自有特定的名称和用途，它们被恰如其分地命名为生命周期回调：
回调方法名称
调用时间点
createdCallback
创建元素实例
enteredDocumentCallback
向文档插入实例
leftDocumentCallback
从文档中移除实例
attributeChangedCallback(attrName, oldVal, newVal)
添加，移除，或修改一个属性
示例：为 &x-foo& 定义 createdCallback() 和 enteredDocumentCallback()
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {...};
proto.enteredDocumentCallback = function() {...};
var XFoo = document.register('x-foo', {prototype: proto});
所有生命周期回调都是可选的，你可以只在需要关注的时间点定义它们。举个例子，你有一个很复杂的元素，它会在 createdCallback() 打开一个 indexedDB 连接。在将其从 DOM 移除时，leftDocumentCallback() 会做一些必要的清理工作。注意：不要过于依赖这些生命周期方法（如果用户直接关闭浏览器标签，生命周期方法是没有机会执行的），仅将其作为可能的优化点。
另一个生命周期回调的例子是为元素设置默认的事件监听器：
proto.createdCallback = function() {
this.addEventListener('click', function(e) {
alert('Thanks!');
我们已经创建好 &x-foo& 并添加了 JavaScript API，但它还没有任何内容。要不我们给它整点？
在这个时候就派上用场了。我们甚至可以用 createdCallback() 给一个元素赋予一些默认的 HTML：
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
this.innerHTML = "&b&I'm an x-foo-with-markup!&/b&";
var XFoo = document.register('x-foo-with-markup', {prototype: XFooProto});
实例化这个标签并在 DevTools 中观察，可以看到如下结构：
用 Shadow DOM 封装内部实现
是一个封装内容的强大工具，配合使用自定义元素就更神奇了！
Shadow DOM 为自定义元素提供了：
一种隐藏内部实现的方法，从而将用户与血淋淋的实现细节隔离开。
简单有效的。
从 Shadow DOM 创建元素，跟创建一个渲染基础标记的元素非常类似，区别在于 createdCallback() 回调：
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
// 1. Attach a shadow root on the element.
var shadow = this.createShadowRoot();
// 2. Fill it with markup goodness.
shadow.innerHTML = "&b&I'm in the element's Shadow DOM!&/b&";
var XFoo = document.register('x-foo-shadowdom', {prototype: XFooProto});
我们并没有直接设置 &x-foo-shadowdom& 的 innerHTML，而是为其创建了一个用于填充标记的 Shadow Root。在 DevTools 中选中“显示 Shadow DOM”，你就会看到一个可以展开的 #document-fragment：
这就是 Shadow Root！
从模板创建元素
是另一组跟自定义元素完美融合的新 API。
可用于声明 DOM 片段。它们可以被解析并在页面加载后插入，以及延迟到运行时才进行实例化。模板是声明自定义元素结构的理想方案。
示例：注册一个由模板和 Shadow DOM 创建的元素：
&template id="sdtemplate"&
p { color: }
&p&I'm in Shadow DOM. My markup was stamped from a &template&.&/p&
&/template&
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = document.querySelector('#sdtemplate');
this.createShadowRoot().appendChild(t.content.cloneNode(true));
document.register('x-foo-from-template', {prototype: proto});
短短几行做了很多事情，我们挨个来看都发生了些什么：
我们在 HTML 中注册了一个新元素：&x-foo-from-template&
这个元素的 DOM 是从一个模板创建的
Shadow DOM 隐藏了该元素的实现细节
Shadow DOM 也对元素的样式进行了隔离（p {color:} 不会把整个页面都搞成橙色）
为自定义元素增加样式
和其他 HTML 标签一样，自定义元素也可以通过选择器定义样式：
app-panel {
[is="x-item"] {
transition: opacity 400ms ease-in-
opacity: 0.3;
text-align:
border-radius: 50%;
[is="x-item"]:hover {
opacity: 1.0;
background: rgb(255, 0, 255);
app-panel & [is="x-item"] {
padding: 5
list-style:
margin: 0 7
&app-panel&
&li is="x-item"&Do&/li&
&li is="x-item"&Re&/li&
&li is="x-item"&Mi&/li&
&/app-panel&
为使用 Shadow DOM 的元素增加样式
有了 Shadow DOM 场面就热闹得多了，它可以。
Shadow DOM 为元素增加了样式封装的特性。Shadow Root 中定义的样式不会暴露到宿主外部或对页面产生影响。对自定义元素来说，元素本身是宿主。样式封装的属性也使得自定义元素能够为自己定义默认样式。
Shadow DOM 的样式是一个很大的话题！如果你想更多地了解它，推荐你阅读我写的其他文章：
使用 :unresolved 伪类避免无样式内容闪烁（FOUC）
为了缓解的影响，自定义元素规范提出了一个新的 CSS 伪类 :unresolved。在浏览器调用你的createdCallback()（请看一节）之前，这个伪类都可以匹配到 。一旦产生调用，就意味着元素已经完成提升，成为它被定义的形态，该元素就不再是一个 unresolved 元素。
Chrome 29 已经原生支持 :unresolved 伪类。
示例：注册后渐显的 &x-foo& 标签：
opacity: 1;
transition: opacity 300
x-foo:unresolved {
opacity: 0;
请记住 :unresolved 伪类只能用于 ，而不能用于继承自 HTMLUnkownElement 的元素（请看一节）。
/* 给所有未提升元素添加边框 */
:unresolved {
display: inline-
/* 未提升的 x-panel 文本内容为红色 */
x-panel:unresolved {
/* 完成注册的 x-panel 文本内容为绿色 */
padding: 5
I'm black because :unresolved doesn't apply to "panel".
It's not a valid custom element name.
&x-panel&I'm red because I match x-panel:unresolved.&/x-panel&
了解更多 :unresolved 的知识，请看 Polymer 文档。
历史和浏览器支持
特性检测就是检查浏览器是否提供了 document.register() 接口：
function supportsCustomElements() {
return 'register'
if (supportsCustomElements()) {
// 使用自定义元素 API
// 使用其他类库创建组件
浏览器支持
Chrome 27 和 Firefox 23 都提供了对 document.register() 的支持，不过之后规范又有一些演化。Chrome 31 将是第一个支持新规范的版本。提示：在 Chrome 31 中使用自定义元素，需要开启 about:flags 中的“实验性 web 平台特性（Experimental Web Platform features）”选项。
在浏览器支持稳定之前，也有一些很好的过渡方案：
框架提供了一个
Mozilla 开发的
HTMLElementElement 怎么了？
紧跟过标准的人都知道曾经有一个 &element& 标签。它非常好用，你只要像下面这样就可以声明式的注册一个新元素：
&element name="my-element"&
&/element&
不幸的是，在它的、边界案例，以及末日般的复杂场景中，需要处理大量的时序问题。&element& 因此被迫搁置。2013 年 8 月，Dimitri Glazkov 在
邮件组中宣告废弃 &element&，至少目前看来是废掉了。
值得注意的是，Polymer 实现了用
形式声明式地注册元素。这是怎么做到的？它用的正是 document.register('polymer-element') 以及一节介绍的技术。
自定义元素为我们提供了一个工具，通过它我们可以扩展 HTML 的词汇，赋予它新的特性，并把不同的 web 平台连接在一起。结合其他新的基本平台，如 Shadow DOM 和模板，我们领略了 web 组件的宏伟蓝图。标记语言将再次变得很时髦！
如果你对使用 web 组件感兴趣，建议你去看看
框架，从它开始玩吧。