DOM编程艺术

DOM

前言

如果人们在开始使用一种新技术时没有经过深思熟虑，而这种新技术有很快成为一种潮流，则纠正在早期阶段养成的坏习惯将会非常困难。

1、平稳退化

a、JavaScript： 伪协议

<a href="javascript:alert("hello world");">example</a>

在较老的浏览器会尝试打开链接而失败，这种做法非常不好。
b、内嵌的时间处理函数

<a href="#" onclick="hello(); return false;">test</a>

这种方法跟上一种方法也一样，非常不好。
c、平稳退化

<a href="www.baidu.com" onclick="changeHref(this.href);return false;">test</a>

2、向后兼容

a、对象检测
不足：编写出来的函数会增加一层又一层的花括号，把测试条件如果你理解……改为如果你不理解……

function hello(){
  if(!document.getElementsByTagName) return false;
  var a=document.getElementsByTagName("li");
  console.log(a);
  }

b、浏览器嗅探技术

3、性能优化

• 尽量少访问DOM和尽量较少标记（减少文档中的标记数量，减少DOM树的规模）
• 合并和放置脚本
• 压缩脚本

4、结构化程序设计

函数应该只有一个入口和一个出口，但是有些时候是有例外的，一个函数如果有多个出口，只要这些出口集中哦出现字函数的开头部分就可以接受的。

function gallery(){
 if(!document.getElementsByTagName) return false;
 if(!document.getElementsByClassName) return false;
 }

5、共享onload事件

window.onload=firstEvent;
window.onload=secondEvent; //第二个事件会覆盖第一个事件，事件处理函数只能绑定一条指令

可以适应一个匿名函数解决

window.onload=function(){
    firstEvent();
    secondEvent();
}

一个弹性的解决方法，Simon Willison

function onloadEvent(func){
 var a=window.onload;
 if(typeof a!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
           a();
           func();
    }

6、DOM Core 和HTML-DOM

7、CSS-DOM

使用DOM脚本设置样式

• 根据元素在节点树里的位置来设置样式
• 根据某种条件反复设置某种样式
• 响应事件
• className属性