我们会谈到一些HTMLElement接口中看似无关紧要的全局属性。我们将开发一个与著名电视节目“百万富翁”(WhoWantstoBeaMillionaire)初赛类似的简单游戏，要求将一些词语依照给定标准按顺序排列。我们将这游戏称为“-4”。
它涉及到27个欧盟成员国首都的居民数量、地理位置等资讯。^[noteI游戏由一个HTML组件.一个脚本组件及一个CSS组件组成。3个组件都可_以在线体验及查看.地址如下：
http://html5.komplett.cc/code/chap^global/4_en.htmlVhttp://html5.komplett.cc/code/chap_global/4.jshttp://html5.komplett.cc/code/chap_global/l.css.1class属性的变化
首先我们来看看HTMLElement接口的一个新DOM方法，通过它我们可以根据相对应的class属性document.getElementsByClassName()内容访问元素。它的用法实在是再简单不过了：
varquestions=document.getElementsByClassName('q');通过它我们得到一个列表，该列表包含所有class属性为“q”的元素，并依元素在DOM树的位置排序。列表是由包含各个首都名称的H元素构成的。现在我们已经完成了游戏的第一步：在questions变量中创建到游戏对象的实时引用。它可以反映单个li元素的当前状态。
Berlin
Vienna
访问li元素有两种方式：通过偏移(索引)或通过名称。此名称并非节点内容，而是存在的id或name属性的值：
questions.item(l).innerHTML=>Vienna
questions.namedltem(rde^).innerHTML=>Berlin列表长度可用questions.length取得，这意味着item(i)的偏移值可介乎0到questions.length-1之间。某些元素-例如form-没有id属性而有name属性，那么仍然可以用namedltem(str)来取得该属性的值。
若需搜索多个class,你可以使用call方法，传入用空格分隔的值。以水果店为例，以“我喜欢的”为标准，搜索定义为red或apple的水果：
varmmm=document.getElementsByClassName('redapple');我们可以通过这种方法找到所有红色水果、所有苹果，以及红色的苹果。
用“data-m定义自定义属性
在以前，HTML中是无法自由定义自定义属性的，但现在的HTML规范提供了这个支持：data-*属性。它的用法十分简单，仅需要为自定义属性加上前缀data-。自定义属性的命名规则如下：长度至少为一个字节，不能包含任何大写字母。以游戏中27个首都中某一个的数据字段为例，它的居民数量、地理位置及相关国家的数据属性如下：
Vienna
下一个问题是如何访问自定义属性。一种常用方法是通过getAttribiiteO及setAttributeO,但规范提供了更好的选择：dataset(数据集)属性。我们可以通过dementdataset检索及设定指定元素中的数据属性：
varel=q.namedltemCat');
varpop=el.dataset.pop;//80
varlat=el.dataset.geoLat;//4
varlng=el.dataset.geoLng;//1
varctr=el.dataset.country;//Austria
宁波网站建设认为//andtwoyearslaterperhaps…el.dataset.pop=34；请留意含有“el.dataset.geoLat”的第三行：这明显表示符号对数据属性有着特殊意义，否则data-geo~lat不会突然变成dataset.geoLat。我们把下一字母转化为大写用以代替原有的符号——这种特殊写法被称为驼峰(CamelCase)。现在你应该了解为什么数据属性中不能有大写字母，因为在替换符号时，大写字母可能带来预料之外的.麻烦。
不幸的是，对element.dataset的支持尚未完善。在写下此文时，仅有WebKit在它的Nightlybuilds应用了datasetDOM属性。针对这一缺陷，游戏采用了RemySharp的html5-data.js作为变通方案，html5-data.js是一个JavaScript中间件(译者注：即shim,在第一章有过对它的注释)，它最低程度保证了对数据属性的读取。至于在赋值方面，我们采用的是老牌优质方法setAttribute()。
background-color:hsl(75,l00%,85%)；
border-color:hsl(7S,l00%>40%)；
正确回答了所有问题之后，用户将看到祝贺成功的提示。之后，若单击restart按钮，将再次出现4个随机选择的城市以开始新游戏。若用户认为研究人口数量过于沉闷，也可以从下拉菜单中选择其他两种游戏模式：按地理位置从北到南或者从东到西来排列城市。关于游戏的JavaScript及CSS细节，可见以下链接：
http://html5.komplett.cc/code/chap_global/4.jshttp://html5.komplett.cc/code/chap_global/4.css图1展示了游戏进行中的截图。你还可以自行扩展游戏，制作一个支持选择城市数量的扩展包，然后将左边的静态列表将变成动态。试一下吧！
回到正题，在这个简单而实用的案例中，还存在一些没提到的细节，例如说，拖曳操作中的另外3个事件：drag、dragend以及dragleave。在拖动过程中将会生成一个drag事件，其响应间隔为ms(±ms)而放置将生成一个dragend事件，第三个事件dragleave在目标对象离开放置区时发生。
DataTransfer同样提供了些有趣的方法和属性---例如setDragImage(element,x，y)方法，用来在拖曳过程中显示自定义图像作为反馈。使用addElexnenKelement)能达到类似效果，但这里我们所拖曳的并非单单一张图片，而是页面上的整个选区。
使用dataTransfer.types，我们可以返回任意格式的DOMStringList值——这个值通过SetData()在startdreg事件中设置。在这个游戏中，这个列表较短，仅包含format参数“text”
和ID,由浏览器自动解析为text/plain。不过DOMStringList的格式并非仅限于MIME类型，规范同样允许和MIME类型无关的格式存在。因此我们得以使用名称更具可读性的数据属性命名format参数。以ID及人口数为例，其代码如下：
evt.dataTransfer.setData(1id',evt.target.id);evt.dataTransfer.setData(1pop',evt.target.dataset.pop);它们可以通过getData(’id')或getData('pop')获取。
若拖曳元素包含了微数据(m/crodata)属性，所有值将自动作为JSON字符串传递，并可通过getDataCapplication/microdata+jsoiV)访问。
f若需在拖曳操作过程中从列表中移除特定格式，我们可以使用clearData(format)方法。若忽略format参数，那么所有现存格式都将被删除。
两个DataTransfer属性effectAllow和dropEffect看名字似乎很有前途，像是跟视觉效果之类的有关。不过具体来说，它们仅仅用于控制目标对象进人放置区时的光标外观。dropEffect的有效关键字为copy、link、move以及none。它们在dragenter事件过程中为光标添加加号、连接符、箭头或什么都不添加(若选择none)。你可以用一个小程序在线测试你浏览器中的效果：http://html5.komplett.cc/code/chap_global/dropEffecten.htmlodropEffect属性值可在拖曳过程中任意改变，但必须始终与之前在effectAllow中指定的值保持一致。除了copy、link、move及none之外，effectAllow还支持组合词，诸如copyLink、copyMove及linkMove，它将这些词中的两个组成部分全部有效化。你还可以通过关键字all允许所有效果。
在进人下一章节之前，让我们来讨论一下拖曳中的安全问题：DataTransfer对象中的数据仅在drop事件中再次对脚本开放。因此，在将文档从A拖曳至B的过程中，恶意文档C无法截取该数据。基于同样的原因，drop事件必须明确由用户的放置行为激活，而非由脚本自动执行。甚至，由脚本控制将窗口到鼠标位置的动作也无法激活dragStart事件，否则敏感数据可能会出人意料的被恶意拖曳至第三方文档中。
浏览器中的拖曳开启了许多新特效的宝库大门。如果你想看看拖曳与画布(Canvas)、本地存储(localStorage)、离线缓存(offlinecache)等HTML5技术相结合的效果，譬如XMLHttpRequest或FileAPl,那就别错过PaulRouget的博客-一个HTML5离线图像编辑及上传程序，以及一段四分钟长的视频。即便其初衷只是为了展示Firefox的一些特性，但他也以一种令人钦佩的态度为我们展示了HTML5能做到些什么。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
