JavaScript DOM操作提高篇

　　做为一个web前端，处理和了解浏览器差异一个重要问题.下面将介绍本人在工作中的一些笔记总结，先介绍没有使用js库的情况。

　　1.　　setAttribute方法设置元素类名：在jQuery中，直接使用attr()方法即可，可在原生的JS中

element.setAttribute('class','newClassName') //这个是W3C的标准，在兼容W3C标准的浏览器中有效，可是，IE才是国内用户的主旋律
element.setAttribute('className','newClassName') //这样的设置在IE中才能有效
element.className = 'newClassName' //所有浏览器有效(只要支持javascript)

　　好了，开篇说完了，这篇文章的目的也就是介绍浏览器差异的同时使前端的朋友们了解如果用最有效的方法去解决问题，下面继续。

　　2.　　FireFox没有window.event对象，只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成：

function handle(e)
{
e = e || event;
...
}

　　3.　　DOMContentLoaded事件原理：对window.onload事件是当页面解析/DOM树建立完成，并完成了如图片、脚本、样式表等所有资源的下载后才触发的。这对于很多实际的应用而言有点太“迟”了，比较影响用户体验。为了解决这个问题，FF中便增加了一个DOMContentLoaded方法，与onload相比，该方法触发的时间更早，它是在页面的DOM内容加载完成后即触发，而无需等待其他资源的加载(这个也就是jquery.ready()事件的实现原理)。

//以下是jQuery 1.4.2版本的原版分析

bindReady: function() {
　　if ( readyBound ) {
　　　　return;
　　}
　　readyBound = true;
　　// Catch cases where $(document).ready() is called after the
　　// browser event has already occurred.
　　if ( document.readyState === "complete" ) {
　　　　return jQuery.ready();
　　}
　　// Mozilla, Opera and webkit nightlies currently support this event
　　if ( document.addEventListener ) {
　　// Use the handy event callback
　　　　document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
　　　　// A fallback to window.onload, that will always work
　　　　window.addEventListener( "load", jQuery.ready, false );
　　　　// If IE event model is used
　　} else if ( document.attachEvent ) {
　　　　// ensure firing before onload,
　　　　// maybe late but safe also for iframes
　　　　document.attachEvent("onreadystatechange", DOMContentLoaded);
　　　　// A fallback to window.onload, that will always work
　　　　window.attachEvent( "onload", jQuery.ready );
　　　　// If IE and not a frame
　　　　// continually check to see if the document is ready
　　　　var toplevel = false;
　　　　try {
　　　　　　toplevel = window.frameElement == null;
　　　　} catch(e) {}
　　　　if ( document.documentElement.doScroll && toplevel ) {
　　　　　　doScrollCheck();
　　　　}
　　}
}

　　设计思路 - 将Webkit与Firefox同等对待，都是直接注册DOMContentLoaded事件，但是由于Webkit是在525以上版本才引入的，因此存在兼容性的隐患。对于IE，首先注册document的onreadystatechange事件，经测试，该方式与window.onload相当，依然会等到所有资源下载完毕后才触发。之后，判断如果是IE并且页面不在iframe当中，则通过setTiemout来不断的调用documentElement的doScroll方法，直到调用成功则出触发DOMContentLoaded。1 jQuery对于IE的解决方案的原理是，在IE下，DOM的某些方法只有在DOM解析完成后才可以调用，doScroll就是这样一个方法，反过来当能调用doScroll的时候即是DOM解析完成之时，与prototype中的document.write相比，该方案可以解决页面有iframe时失效的问题。此外，jQuery似乎担心当页面处于iframe中时，该方法会失效，因此实现代码中做了判断，如果是在iframe中则通过document的onreadystatechange来实现，否则通过doScroll来实现。不过经测试，即使是在iframe中，doScroll依然有效。

　　4.　　学会使用IE的条件注释。许多前端总是在抱怨万恶的IE,确实,处理兼容性的问题确实会越来越恶心,可是没有办法,既然没有办法改变,那么请享受...

　　今天就先总结到这里吧，下周收假回来有时间发高级AJAX篇，希望能对新手或者有需要的人有所帮助.由于文笔有限，写的不好也请见谅，这个刚刚开始写博客，成长阶段嘛。哈哈...

JavaScript DOM操作提高篇相关推荐

视频教程-Javascript DOM操作-JavaScript
Javascript DOM操作江湖花名King... 何山 ¥39.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最少立减5元 ↓↓↓ ...
javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
JavaScript DOM操作Select下拉框
DOM操作Select下拉框: 获取select选中的option值,修改选中的选项,添加选项option. <body> <script type="text/javas ...
JavaScript DOM操作为什么会影响性能
DOM操作影响性能的原因主要有以下两点: 在浏览器中,DOM的实现和ECMAScript的实现是分离的.比如在Chrome中使用WebKit中的WebCore处理DOM和渲染,但ECMAScript是 ...
java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率不支持事 ...
JavaScript DOM操作表格及样式
一操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
常见的原生javascript DOM操作
1.创建元素创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
JavaScript DOM操作，就是这么简单！
DOM,即文档对象模型(Document Object Model),是通过JavaScript来对HTML文档进行管理和操作的一类对象模型,通过DOM可以操作HTML的元素和元素的属性,包括对元素 ...
【收藏】JavaScript DOM操作简易速查手册
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全: 书单导航页(点击右侧极客侠栈即可打开个人博客):极客侠栈 ①[Java]学习之路吐血整理技术书 ...

JavaScript DOM操作提高篇

JavaScript DOM操作提高篇相关推荐

最新文章

热门文章

JavaScript DOM操作 提高篇

JavaScript DOM操作 提高篇相关推荐

最新文章

热门文章

JavaScript DOM操作提高篇

JavaScript DOM操作提高篇相关推荐