《原生DOM知识的积累课件》由会员分享，可在线阅读，更多相关《原生DOM知识的积累课件（45页珍藏版）》请在金锄头文库上搜索。
1、原生DOM知识的积累,作者介绍,司徒正美:钟钦成 去哪儿网前端架构师,DOM的重要性,DOM是前端开发的操作主体,种类繁多,是大理石,檀香木,黄金,青铜,玉石,银块,瓷砖,水晶 CSS是挂毯，墙纸，地毯，壁画，帐幔 javascript只是粘合剂,水泥,了解各种质材才能建造宏伟壮丽的宫殿，你只有水泥与砖头只能建民房 当你手上有一把锤子的时候，看所有的东西都是钉子,如何判定当前浏览器,UA 不可靠，杂质多，充满欺骗与谎言 缺憾判定，功能判定，特性判定,缺憾判定,升级了就失效 !+v1 !-1, !10 /w/.test(u0130),功能判定,jquery.support的实现，复杂，专治国产无
2、良浏览器玩空接口跑高分的伎俩,特性判定,只判定其存在不存在，简单实用 两种 私有实现 带提供商前缀的非标准实现,私有实现,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,非标准实现,sty
3、le.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.We
4、bKitCSSMatrix window.OTransitionEvent window.oTransitionEvent,window.webkitRequestAnimationFrame,oninput,与onchange的区别是,不用等到失去焦点,每改变一个字符都会触发 目前我们有四种方法来改变value值 el.value = xxx el.setAttribute(value,xxx) 用户通过键盘输入改变 用户通过语音输入改变,各种兼容方案,W3C的oninput支持方式，方式，并且支持剪切粘贴退格引发的改动监听 DOMAttrModified 支持方式 IE6-8的onprop
5、ertychange支持方式，方式，方式，并且支持剪切粘贴退格 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有效 ,中文输入法之痛
6、,maxlength compositionstart + compositionend+ input,微博at功能的实现,难点：得到距离textarea左上角的距离 要点：我们所有丈量用的API都是基于DOM,复制一个等大的pre元素节点，它的内部样式（行高，字体等等）与textarea一模一样。 绑定input事件，将textarea.value复制到pre中，此时难点是保持与textarea那样在同相同的位置换行。W3C，在每个字符后插入wbr元素，IE添加word-wrap: break-word; word-break: normal; 样式,步骤,将最后一个用特殊的元素节点包起来，
7、然后通过element.getBoundingClientRect或Range.getBoundingClientRect得到它距离页面坐标 将getBoundingClientRect得到的坐标相减，得到距离textarea的坐标，再动态创建一个下拉列表，定位到此处,知识点 两个元素的样式对拷,知识点 坐标的获取,深入了解事件系统,添加事件 删除事件 事件流 阻止事件传播与默认行为 程序触发事件,程序触发事件,IE6-8 创建事件对象createEventObject() 触发事件fireEvent() W3C 创建事件对象 createEvent(xxx) 初始化事件 initXxxxEv
8、ent() 触发事件 dispatchEvent(),双方的弊端,IE6-8不能触发自定义事件 W3C创建与初始化事件非常麻烦,涉及太多API,自定义事件,DOM3,自定义事件,DOM4,自定义事件,Event基类工厂,自定义事件,构造器方式,悲剧的鼠标事件模拟,DOM3的initMouseEvent要传15个参数 ,悲剧的鼠标事件模拟,DOM4的EXT式参数打包,webkit的KeyboardEvent BUG,keyCode, which失效 ,W3C初始化一个事件涉及的方法,https:/developer.mozilla.org/en-US/docs/Web/API/document.
9、createEvent#Notes,CSS3动画结束事件,transitionend ,CSS3动画结束事件,animationend,溢出事件,overflow、underflow(ff), overflowchanged(chrome) ,变动事件,DOMNodeInserted DOMNodeRemoved DOMSubtreeModified DOMAttrModified DOMCharacterDataModified MutationObserver ,用途：版块间的通信与UI测试,古人重视马， 马有许多分类： 骍是红色的马；骢是青白色的马；骊、骓是黑色的马；骠是黄色马带白点；骃
10、是浅黑杂白的马。 中国人重视吃，有各种做 事件类型越多，说明交互越来越被重视,学习渠道,书藉 JavaScript DOM编程艺术 JavaScript高级程序设计 JavaScript框架设计,学习渠道,网站 https:/developer.mozilla.org/en-US/docs/Web/CSS/Reference http:/www.w3help.org/zh-cn/ http:/www.webkit.org/ http:/b.hatena.ne.jp/hisasann/JavaScript/,学习渠道,博客 http:/ejohn.org/ http:/dean.edwards.name http:/www.quirksmode.org/ ,Q & A,
