上次写过 《模拟兼容性的 addDOMLoadEvent 事件》，昨天抽时间整理成了 domReady 函数。 使用非常方便： domReady(function () { // Dom is loaded! You can do anything! }); 测试案例：http://blank.github.com/domready/test/ 代码如下（注释较为详尽，就不再说明了）： /** * domready.js – Specify a function to execute when the DOM is fully loaded. * Copyright (c) 2011 Blank Zheng (blankzheng@gmail.com) * http://www.planabc.net */ (function (doc, win) { var isReady = 0, isBind [...]
... 0 条评论»最近对 Range 和 Selection 比较感兴趣。 基本非 IE 的浏览器都支持 DOM Level2 中的 Range，而 IE 中仅有自己的简单处理方法（Text Rang）。 扩展阅读： 《TextRange Prototype》 《Document Object Model Range》 《Javascript标准DOM Range操作(1)》（节选自《JavaScript 高级程序设计》） 《Javascript标准DOM Range操作(2)》（节选自《JavaScript 高级程序设计》） 《Javascript标准DOM Range操作(3)》（节选自《JavaScript 高级程序设计》） 而 IE 下的 Text Rang 主要用来处理文本，并非 DOM 节点，那如何在 IE 下模拟 DOM Level2 中的 Range 呢？ 根据规范的 API，我们需要模拟下述属性和方法： function zRange() { // Inital states this.startContainer [...]
... 6 条评论 »首先让我们看看哪些元素可以直接获得焦点（element..focus()）： // Form : http://www.w3.org/TR/html5/editing.html#focusable a elements that have an href attribute link elements that have an href attribute button elements that are not disabled input elements whose type attribute are not in the Hidden state and that are not disabled select elements that are not disabled textarea elements that are not disabled command elements [...]
... 4 条评论 »由于 window.onload 事件需要在页面所有内容（包括图片等）加载完后，才执行，但往往我们更希望在 DOM 一加载完就执行脚本。其实在现在大部分主流浏览器上（Firefox 3+，Opera 9+，Safari 3+，Chrome 2+）都提供了这一事件方法：addDOMLoadEvent。 document.addEventListener(“DOMContentLoaded”, init, false); 那对于 IE 我们如何模拟 addDOMLoadEvent 事件呢？ Matthias Miller 最早提供了如下的解决方案： // for Internet Explorer (using conditional comments) /*@cc_on @*/ /*@if (@_win32) document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); var script = document.getElementById(“__ie_onload”); script.onreadystatechange = function() { if (this.readyState == “complete”) { init(); // call the onload handler } [...]
... 12 条评论 »DOM Storage，是基于 Web Applications 1.0 specification 中介绍的 Structured client-side storage。相比 Cookies 来说，DOM Stroage 空间更大、更安全、更易于使用的。目前它只在基于Moziila的浏览器中可以使用，从 Firefox2 开始。 一、DOM:Storage: sessionStorage 浏览器支持：Firefox 2.0+ 基本语法： // 设置 key 值 sessionStorage.key = value; // 获取 key 值 value = sessionStorage.key; 备注： 作为每个 window 对象的属性存在的全局对象，即：可以通过 sessionStorage 或者 window.sessionStorage 来访问它们。 sessionStorage 含有一个在页面会话有效期内（只要页面没有关闭，一个页面会话就始终保持着，且当页面被重新载入或恢复时“复活”，而打开一个新的标签页或新窗口都会初始化新的会话）可用的存储区域。 sessionStorage 持有那些应该保存的临时数据，一旦浏览器突然被刷新时，可恢复。 sessionStorage 暂时... 12 条评论 »
function replaceHtml(el, html) { var oldEl = typeof el === “string” ? document.getElementById(el) : el; /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点 oldEl.innerHTML = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl.innerHTML = html; oldEl.parentNode.replaceChild(newEl, oldEl); /* 一旦我们从 DOM 上移除老的元素，则返回新的元素引用。*/ return newEl; }; 此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 [...]
... 10 条评论 »
