很久以前做网页的时候，几乎没有听说过 getElementById 这一玩意儿。在那个ie独占天下的年代里，做的页面也几乎都是ie only的。只要ie没问题，那就OK了。所以绝大多数的脚本里，都是直接通过元素的id来访问DOM的。
后来随着各种浏览器接踵而至，逐渐的替代了ie。为了保证各路门派统一规则，标准化越来越被重视。当初那种直接访问id的方法，逐渐被document.getElementById所替代。如果这年头还在用id访问元素，要么就是做程序里的内嵌网页，要么就是像铁道部那样的超境界仿古网站：） 当然只要保证你的用户都是用ie访问，这样的非标准也但用无妨。
然而，很多第三方浏览器刚出来的时候，为了保证能与当时大量的非标准页面兼容，都保留了用id访问DOM这一非标准做法。事实上如今的主流浏览器，只有FireFox不支持这种做法，而Chrome,Opera,Safari,Mobile Safari都支持。
既然如此，我们不如让FireFox也支持，这样所有的浏览器都可以直接用id直接访问DOM，不仅快捷方便，减少了累赘的代码，更能提升运行的效率。
实现很简单，文档载入完成后查询带有id属性的元素，然后在window对象里添加其引用：
var list = document.querySelectorAll('[id]'); for(var i = 0; i < list.length; i++) { if(list[i].id) window[list[i].id] = list[i]; }
当然，只有FF需要这个hack，所以我们先检测下是否有其特征。最后精简下代码，利用数组遍历回调，即可压缩到简单的一行：
<script> if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){self[k.id]=k}); </script>
不过有个值得注意的地方，在文档载入尚未完成前 querySelectorAll，只能查询当前<script>之前的元素。所以以上代码必须放在文档的末尾。而使用id访问，也必须在文档载入完成之后，否则就可能找不到这个元素。下面是个测试页面，在所有浏览器下都通过：
<!DOCTYPE html> <html> <head> <title>No document.getElementById</title> </head> <body> <div id="mytag"></div> <script> onload = function() { mytag.innerHTML = "Goodbye, document.getElementById!"; } </script> <script> if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(e){self[e.id]=e}); </script> </body> </html>
posted @ 2012-06-01 20:48 EtherDream 阅读(1549) 评论(4) 编辑
摘要: 根据传统变速齿轮原理，移植到JavaScript上，方便动画脚本的观察和调试。插件完全使用JS/CSS编写，引入测试页面即可使用。阅读全文
posted @ 2012-05-29 15:09 EtherDream 阅读(993) 评论(9) 编辑
摘要: 尝试给一个iframe设置裁剪区域，只留下里面的想让用户点击的部分，然后将裁剪后的iframe伪装成页面里的按钮，让用户点！阅读全文
posted @ 2012-05-09 19:53 EtherDream 阅读(1709) 评论(12) 编辑
摘要: 曾经写的一个JS版本《坦克大战》游戏，纯粹的JS/CSS制作。作为2012贺岁礼物分享给大家吧~对于初学OOP思想，或者游戏基本概念的，都可以参考下阅读全文
posted @ 2011-12-31 01:12 EtherDream 阅读(3922) 评论(72) 编辑
摘要: 尝试在ActionScript运行时下执行JavaScript代码。探索借用Flash的IDE调试JS，改进开发模式。阅读全文
posted @ 2011-11-25 16:31 EtherDream 阅读(1005) 评论(1) 编辑
摘要: 尝试在Web里使用7z压缩数据。利用Alchemy编译出高效的LZMA算法，在AVM2虚拟机中运行。配合JS+AS，即可实现数据在线解压。阅读全文
posted @ 2011-11-12 23:15 EtherDream 阅读(1152) 评论(3) 编辑
摘要: ECMA-262中eval是一个类似关键字的标记符。和this一样，既是关键字也是变量（函数变量）。window.eval仅仅是window对象里的一个叫eval的属性，指向eval函数的属性，和eval字面意义完全不同。阅读全文
posted @ 2011-11-08 18:51 EtherDream 阅读(957) 评论(7) 编辑
摘要: 整理文件时翻出一个好久前做的泡泡屏保的特效，纯JS+CSS做的。回想了下，是去年年初时看见XP下那个流行的泡泡屏保，突然想移植到JS版本来。但有做着才发现有不少麻烦的问题解决不好，于是没继续。
和XP系统自带的那个屏保一样，从屏幕一个角落里冒出很多泡泡，然后在屏幕里碰撞反弹。泡泡有着半透明的渐变色，并且颜色也是在不停的变换。阅读全文
posted @ 2011-11-08 12:11 EtherDream 阅读(1448) 评论(10) 编辑
摘要: 前些时候做的一个卡片式相册，收集了近几年的Doodle。 本人最忠诚的Google Fans :)
页面支持所有的桌面浏览器外，还兼容了iOS系统的mobile safari。你可以体验下用手指拖曳精美的Doodle卡片~
在桌面电脑上，你的显示器分辨率越高，视觉效果就越好，别忘了可以按F11全屏浏览。
页面除了用来观赏外，另一个用途就是测试你的浏览器性能。目前排名是Firefox最流畅，而据称渲染最快的Opera反倒最慢...
有iPad2或者iPhone4S的朋友不妨可以试试，双核的强大威力：）阅读全文
posted @ 2011-10-25 22:00 EtherDream 阅读(1816) 评论(15) 编辑
摘要: 在地址栏载入脚本，不少插件都是用这个方法，并且可以添加到收藏夹。本文尝试简化其代码，压缩到最极限。阅读全文
posted @ 2011-10-08 19:29 EtherDream 阅读(3888) 评论(18) 编辑
摘要: Flash元素，无论是object还是embed，必须由页面外的脚本创建，否则会出现虚线边框，和“单击以激活并使用控件”的提示。阅读全文
posted @ 2011-09-06 13:25 EtherDream 阅读(1400) 评论(0) 编辑
摘要: WebP是Google推出的一种图片格式，比JPEG小40%。但目前仅Chrome和Opera支持。本文通过Alchemy技术实现了高效的在线解码器，配合WebP.js插件，可在任何浏览器下显示.webp图片。阅读全文
posted @ 2011-09-05 18:51 EtherDream 阅读(1498) 评论(8) 编辑
摘要: 我的javascript探索应该做个了结了吧~ javascript是副七巧板，虽然能拼出的图案有限，但是充分发挥你的想象力，还是可以拼出令人称奇的图案。 这些年用js做了各种各样的特效以及小游戏，无一例外就是为了说明js+css是很强大的组合，可以创造出各种意想不到的有趣玩意。但js终究还是脚本，尽管他可以实现各种强大复杂的效果，但需要付出更多的代价，无论是开发效率，还是运行效率。 如今众多浏览器占据天下，而每个浏览器都有自己的特性，想用js来一次开发到处运行似乎是种奢望。举个简单的例子，ie支持滤镜，其他的都没有；而其他的浏览器都支持画布，唯独ie没有。但又出了ie9，变...阅读全文
posted @ 2011-04-30 23:36 EtherDream 阅读(1832) 评论(9) 编辑
摘要: IE9之前的浏览器都存在的BUG：在png-24图片上使用滤镜(CSS filter)，图片的alpha通道丢失。解决办法就是用DXImageTransform.Microsoft.AlphaImageLoader载入图片，代替img或者background。阅读全文
posted @ 2011-04-08 17:17 EtherDream 阅读(2506) 评论(14) 编辑
摘要: 不同浏览器下setInterval最短触发间隔。简单的测试比较。阅读全文
posted @ 2011-03-14 14:28 EtherDream 阅读(1097) 评论(5) 编辑
摘要: 测试比较预先缓存DOM对象能提升的性能。阅读全文
posted @ 2011-03-14 13:27 EtherDream 阅读(1516) 评论(10) 编辑
摘要: 尝试在JS中模拟Java的HashMap结构。支持Object类型的key索引。阅读全文
posted @ 2011-03-13 14:36 EtherDream 阅读(1489) 评论(0) 编辑
摘要: 阅读全文
posted @ 2011-03-11 17:29 EtherDream 阅读(2887) 评论(12) 编辑
摘要: 8年前的今天，本人还是刚踏入互联网不久的小菜鸟。记得那还是一个IE5的时代，Win98的经典风格和亲切的蓝屏画面仍旧是记忆犹新。不过抱着对这未知世界的好奇，很快学会了新手最爱的开门语言——VB和HTML。顺着VB熟悉的手感，不经意间过度到了VBScript。在那个IE统揽天下的时候，VBScript仍然是流行的网页脚本语言，而JavaScript类似Java那陌生的风格反倒让我倍感别扭。 那时的网站还是比较简单的，表格布局的前台，配合ASP和Access制作的后台，就是一个典型的网站。网页脚本也只是简单的验证验证表单，或者就是一些网页特效，例如图片跟随鼠标之类的。不过和大家不一样，我...阅读全文
posted @ 2011-03-11 15:18 EtherDream 阅读(3130) 评论(13) 编辑
摘要: 阅读全文
posted @ 2011-03-10 19:47 EtherDream 阅读(2224) 评论(5) 编辑
摘要: 你是否发现有这么一个现象，比如在百度上搜索，显示出来的文字只占了左半个屏幕，而文字的垂直长度却要拖上整整一屏幕的滚动条。内容占用空间的纵横比例似乎有些不协调，尤其是在宽屏显示器上这个比例更加突出。 当然这样的设计肯定是有好处的，页面看上去显得简洁清爽，右边的空白处还可以贴些小广告（这个是关键吧）。对于这个例子，把滚动条以下的内容放到右边的空白处显然还是绰绰有余的。这样就变成一页好几列的效果，为了体验下这个效果，这里简单的用几个百度的iframe拼接成一个DEMO：http://www.etherdream.com/Creative/BaiduScroll.html 当然由于是很多框架拼起来..阅读全文
posted @ 2011-03-10 16:35 EtherDream 阅读(3334) 评论(35) 编辑
摘要: 利用String.localeCompare拼音排序，实现简短的汉字转拼音程序。阅读全文
posted @ 2011-03-03 21:58 EtherDream 阅读(935) 评论(9) 编辑
摘要: 超快的电信/网通判断代码。ASP版本。阅读全文
posted @ 2011-03-03 20:38 EtherDream 阅读(324) 评论(0) 编辑
摘要: 通过__defineGetter__给FireFox的window定义event属性。沿着Function.caller调用链，追溯到堆栈顶层函数，其中第一个参数即event。阅读全文
posted @ 2011-03-03 19:11 EtherDream 阅读(709) 评论(0) 编辑
摘要: 通过a:visted伪类，让点击过的超链接文字表现出特殊的样式，然后通过脚本检测此特殊样式，分析用户是否访问过该链接。阅读全文
posted @ 2011-03-03 17:48 EtherDream 阅读(936) 评论(2) 编辑
摘要: 话说图片放大，这是一个再容易不过的效果了。当然，今天说的可不是简简单单的在一个框里放大，而是一个圆。就像放大镜或是狙击镜那样，只有圆圈里的放大，圈外的当然还是原来的图片。这是不是很不可思议？ 当然不是。做过Flash的也许会脱口而出：套个蒙版就是了。可惜CSS不是Flash，没有那一套。我们只有从CSS里面慢慢挖掘。 先说IE，因为IE有滤镜，可以实现许多意想不到的功能。先来整理下我们的目标： 1.放大一副图片 2.只显示其中的一个圆 3.圆外是透明的 图片的缩放可以通过img元素的拉伸来实现。接着盖上一张透明像素画的实心圆，因此正好只显示出放大后中心圆圈部分。但第3步可就不对了，虽...阅读全文
posted @ 2011-03-03 17:32 EtherDream 阅读(1938) 评论(1) 编辑
摘要: JS+CSS实现的立方体插件，支持所有主流浏览器。
阅读全文
posted @ 2011-03-03 15:39 EtherDream 阅读(1043) 评论(2) 编辑