JavaScript学习笔记——DOM基础 2.4
一、平稳退化
1、概念
早期，在未使用JavaScript之前，网页中的内容可以正常显示出来，用户可以通过外设（如鼠标）操控浏览到相关内容，这种浏览体验对用户而言可能并不理想。
根据这个需求，内容的提供方就有了合理化目标——那就是在不影响内容展示的前提下，使用JavaScript来改善用户体验，提高用户粘性。
在这个标目中，有个非常明显的条件，就是不能影响内容的正常展示，换言之，即使用户的浏览器不支持JavaScript，也能保证用户可以正常浏览。
2、方法
①将JavaScript与HTML分离
这是首先应该想到的，让两者分离，HTML就像回到早期未使用JavaScript之前的状态，干爽如初啊。
譬如将element.onClick之类的事件处理函数写进JavaScript中，与某函数进行绑定。
②对JavaScript中的方法进行检测
之前提到的一些方法，如getElementById之类，都需要去判定该方法是否支持。
<script> if(! document.getElementById) return false; </script>
通过if语句这种方式来检测是否支持该方法，如果支持，可以继续，不支持，直接返回false，这样就没必要耽误功夫了，也起到了性能优化的作用。
二、绑定onload事件
1、绑定缘由
一些函数需要在页面加载完全之后才能有效执行，我们需要将函数绑定到window.onload这个事件上。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>筱雨生 - 博客园</title> <script> function tagAttribute(){ var ali = document.getElementsByTagName('li'); for(var i = 0; i < ali.length; i++){ if(ali[i].firstChild.nodeType == 3){ alert(ali[i].childNodes[0].nodeValue); } } } window.onload = tagAttribute; </script> </head> <body> <h1>筱雨生</h1> <p>時光飛逝，莫讓網絡蹉跎了歲月</p> <div id="myBlog"> <ul> <li title="JavaScript">JavaScript</li> <li title="HTML">HTML</li> <li title="CSS">CSS</li> <li title="我的随笔">我的随笔</li> <li></li> </ul> </div> </body> </html>
在上面这个实例中，如果不绑定window.onload，执行函数tagAttribute将会毫无意义。
还需要注意一点，绑定的是函数，而不是这个函数的值，所以后面不带圆括号。
2、绑定方法
如果你只需要绑定一个函数，那么上面的方法完全可以轻松实现你的目的。
window.onload = myFunction;
如果是多个，也许你会去一个个的绑定，可是，这样做的结果是只有最后一个函数才会被有效执行，关于这一点其实很好理解。
我们的目的是，不管页面中加载完毕时执行多少个函数，这些函数都可以有效执行，也就是说，这些函数都被成功绑定window.onload事件。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>筱雨生 - 博客园</title> <script> function addOnLoadEvent(func){ var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数 window.onload = func; // 将这个函数绑定到window.onload事件 }else{ window.onload = function(){ // 如果这个处理函数已经绑定了函数，就把这个函数追加到指令的末尾 oldonload(); func(); } } } //自定义函数 tagAttribute //功能：获取li标签中的title值 function tagAttribute(){ var ali = document.getElementsByTagName('li'); for(var i = 0; i < ali.length; i++){ if(ali[i].childNodes[0].nodeType == 3){ alert(ali[i].childNodes[0].nodeValue); } } } addOnLoadEvent(tagAttribute); // 为tagAttribute函数绑定到window.onload事件 </script> </head> <body> <h1>筱雨生</h1> <p>時光飛逝，莫讓網絡蹉跎了歲月</p> <div id="myBlog"> <ul> <li title="JavaScript">JavaScript</li> <li title="HTML">HTML</li> <li title="CSS">CSS</li> <li title="我的随笔">我的随笔</li> <li></li> </ul> </div> </body> </html>
三、题外话
当你面对一个问题的时候，一定要坚信它有多种解决方案。
