Shulou(Shulou.com)06/03 Report--

这篇文章主要介绍"原生JavaScript下的DOM操作介绍"，在日常操作中，相信很多人在原生JavaScript下的DOM操作介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"原生JavaScript下的DOM操作介绍"的疑惑有所帮助!接下来，请跟着小编一起来学习吧!

1. setAttribute方法设置元素类名

在jQuery中，直接使用attr()方法即可，可在原生的JS中，

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

= 'newClassName'

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

2. FireFox没有window.event对象

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

1function handle(e)2{3e

= e || event;4...5}3. DOMContentLoaded事件原理

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

01//以下是jQuery

1.4.2版本的原版分析02bindReady: function()

{03 if (

readyBound ) {04 return;05 }06 readyBound

= true;07 //

Catch cases where $(document).ready() is called after the08 //

browser event has already occurred.09 if (

document.readyState === "complete" )

{10 return jQuery.ready();11 }12 //

Mozilla, Opera and webkit nightlies currently support this event13 if (

document.addEventListener ) {14 //

Use the handy event callback15 document.addEventListener( "DOMContentLoaded",

DOMContentLoaded, false );16 //

A fallback to _window.onload, that will always work17 window.addEventListener( "load",

jQuery.ready, false );18 //

If IE event model is used19 } else if (

document.attachEvent ) {20 //

ensure firing before onload,21 //

maybe late but safe also for iframes22 document.attachEvent("onreadystatechange",

DOMContentLoaded);23 //

A fallback to _window.onload, that will always work24 window.attachEvent( "onload",

jQuery.ready );25 //

If IE and not a frame26 //

continually check to see if the document is ready27 var toplevel

= false;28 try {29 toplevel

= window.frameElement == null;30 } catch(e)

{}31 if (

document.documentElement.doScroll && toplevel ) {32 doScrollCheck();33 }34 }35}

设计思路 - 将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中的[xss_clean]相比，该方案可以解决页面有iframe时失效的问题。此外，jQuery似乎担心当页面处于iframe中时，该方法会失效，因此实现代码中做了判断，如果是在iframe中则通过document的onreadystatechange来实现，否则通过doScroll来实现。不过经测试，即使是在iframe中，doScroll依然有效。

4. 学会使用IE的条件注释

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

010407101316

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.