原生JavaScript下的DOM操作介绍-创新互联

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

专注于为中小企业提供成都网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业盂县免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

1. setAttribute方法设置元素类名

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

`1`	`//这个是W3C的标准，在兼容W3C标准的浏览器中有效，可是，IE才是国内用户的主旋律`

`2`	`element.setAttribute('class','newClassName')`

`3`	`//这样的设置在IE中才能有效`

`4`	`element.setAttribute('className','newClassName')`

`5`	`//所有浏览器有效(只要支持javascript)`

`6`	`element.className =` `'newClassName'`

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

2. FireFox没有window.event对象

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

`1`	`function` `handle(e)`

2 {

`3`	`e = e \|\| event;`

4 ...

5 }

3. DOMContentLoaded事件原理

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

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

`02`	`bindReady:` `function() {`

`03`	`if` `( readyBound ) {`

04 　　return;

05 }

`06`	`readyBound =` `true;`

`07`	`// Catch cases where $(document).ready() is called after the`

`08`	`// browser event has already occurred.`

`09`	`if` `( document.readyState ===` `"complete"` `) {`

`10`	`return` `jQuery.ready();`

11 }

`12`	`// Mozilla, Opera and webkit nightlies currently support this event`

`13`	`if` `( document.addEventListener ) {`

`14`	`// Use the handy event callback`

`15`	`document.addEventListener(` `"DOMContentLoaded", DOMContentLoaded,` `false` `);`

`16`	`// A fallback to window.onload, that will always work`

`17`	`window.addEventListener(` `"load", jQuery.ready,` `false` `);`

`18`	`// If IE event model is used`

`19`	`}` `else` `if` `( document.attachEvent ) {`

`20`	`// ensure firing before onload,`

`21`	`// maybe late but safe also for iframes`

`22`	`document.attachEvent("onreadystatechange", DOMContentLoaded);`

`23`	`// A fallback to window.onload, that will always work`

`24`	`window.attachEvent(` `"onload", jQuery.ready );`

`25`	`// If IE and not a frame`

`26`	`// continually check to see if the document is ready`

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

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

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

01

04

07

10

13

`16`	` 在线咨询  服务热线服务热线：028-86922220  TOP`

重庆分公司，新征程启航

原生JavaScript下的DOM操作介绍-创新互联

1. setAttribute方法设置元素类名

2. FireFox没有window.event对象

3. DOMContentLoaded事件原理

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