原生DOM知识的积累.ppt

原生DOM知识的积累 作者介绍 司徒正美:钟钦成 去哪儿网前端架构师 DOM的重要性 DOM是前端开发的操作主体,种类繁多,是大理石,檀香木,黄金,青铜,玉石,银块,瓷砖,水晶…… CSS是挂毯，墙纸，地毯，壁画，帐幔 javascript只是粘合剂,水泥 了解各种质材才能建造宏伟壮丽的宫殿，你只有水泥与砖头只能建民房 当你手上有一把锤子的时候，看所有的东西都是钉子 如何判定当前浏览器 UA 不可靠，杂质多，充满欺骗与谎言 缺憾判定，功能判定，特性判定 缺憾判定 升级了就失效 !+\v1 !-[1,] !1[0] /\w/.test(\u0130) 功能判定 jquery.support的实现，复杂，专治国产无良浏览器玩空接口跑高分的伎俩 特性判定 只判定其存在不存在，简单实用 两种ＡＰＩ 私有实现 带提供商前缀的非标准实现 私有实现 IE window.toStaticHTML window.XDomainRequest window.createPopup window.VBArray window.ActiveXObject chrome window.chrome FF window.GeckoActiveXObject scape window.Components window.updateCommands window.sidebar opera window.opera 非标准实现 style.msInterpolationMode(IE7图片抗锯齿) style.MsTransform(IE9) document.msVisibilityState document.msHidden window.msSetImmediate window.MSGestureEvent window.MSInputMethodContext(IE11) document.mozRequestFullScreen navigator.mozNotification element.mozMatchesSelector window.WebkitTransitionEvent window.WebKitCSSMatrix window.OTransitionEvent window.oTransitionEvent window.webkitRequestAnimationFrame oninput 与onchange的区别是,不用等到失去焦点,每改变一个字符都会触发 目前我们有四种方法来改变value值 el.value = xxx el.setAttribute(value,xxx) 用户通过键盘输入改变 用户通过语音输入改变 各种兼容方案 W3C的oninput支持方式１，方式３，并且支持剪切粘贴退格引发的改动监听 DOMAttrModified 支持方式２ IE6-8的onpropertychange　支持方式１，方式２，方式３，并且支持剪切粘贴退格 IE9的onpropertychange　支持方式１，方法３，不支持剪切粘贴 ＩＥ９的救渎 onpropertychange结合cut, paste事件处理 或者keyup cut paste change四管齐下 语言输入的处理 webkitspeechchange chrome11 http://liumiao.me/html/wd/W3C/264.html 另一种思路 mouseover, mouseout + setInterval轮询 思路三 重写element.value的getter IE9+ firefox有效 /RubyLouvre/avalon/issues/272 中文输入法之痛 maxlength /chyingp/p/3599641.html compositionstart + compositionend+ input 微博at功能的实现 难点：得到@距离textarea左上角的距离 要点：我们所有丈量用的API都是基于DOM 复制一个等大的pre元素节点，它的内部样式（行高，字体等等）与textarea一模一样。 绑定input事件，将textarea.value复制到pre中，此时难点是保持与textarea那样在同相同的位置换行。W3C，在每个字符后插入wbr元素，IE添加word-wrap: break-word; word-break: normal; 样式 步骤 将最后一个@用特殊的元素节点包起来，然后通过element.getBoundingClientRect或Range.getBoundingClientRect得到它距离页面坐标 将getBoundingClientRect得到的坐标相减，得到@距