现在的位置: 首页 > web前端 > 正文

原生JavaScript下的DOM操作

2019年10月29日 ⁄ web前端 ⁄ 共 2957字 ⁄ 字号小中大 ⁄ 评论关闭

原生JavaScript下的DOM操作

2011-05-29

JQuery确实是个很好用的库，你可以不用考虑很多细节方面的事情。但很作为一个web前端，处理和了解浏览器差异一个重要问题。下面将介绍一些总结，先介绍没有使用js库的情况。

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

<!--[if

 IE]>

02

<h1>您正在使用IE浏览器</h1>

03

<![endif]-->

04

<!--[if

 IE 5]>

05

<h1>版本

 5</h1>

06

<![endif]-->

07

<!--[if

 IE 5.0]>

08

<h1>版本

 5.0</h1>

09

<![endif]-->

10

<!--[if

 IE 5.5]>

11

<h1>版本

 5.5</h1>

12

<![endif]-->

13

<!--[if

 IE 6]>

14

<h1>版本

 6</h1>

15

<![endif]-->

16

<!--[if

 IE 7]>

17

<h1>版本

 7</h1>

18

<![endif]-->