原生JavaScript下的DOM操作介绍
创始人
2024-12-17 17:01:46
0次
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{
3    e
= 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 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

上一篇：Javascript中的陷阱有哪些

下一篇：如何解决跨域iframe自适应高度问题

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素，包括空调的型号、功率、使用环境和维护情况等。一般来说，空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异，但一般来说，除湿...
格力空调多长时间加一次氟利昂 1、一般情况下，空调对氟利昂的使用量是非常小的，所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时，空调才需要加氟。1、空调的室内机和室外机各有两个接口，当接...
格调生活·C标思享荟：卡萨帝在... 9月12日的郑州龙湖金融岛，夜风轻拂，灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日，“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新，需要考虑多个因素，以下是一些建议：1. 维修成本：如果维修费用较低，比如 ...
空调开多久需要休息多长时间 问题：空调开多久需要休息多长时间回答：1、在使用空调的过程中，一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可，空调开机中间时段再清洗一次，空调关机时清洗一次，这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度，很多人的观点认为氟利昂必须一年放一次，其实这个观点是错误的，理解上面有点偏差，...