DOM的发展,与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑,DOM才能正确地发挥其功用。如今,正确的语义结构、表现与内容分离等要求,都已经成为网页设计中的基本要求。因此,在网页前端开发中,DOM的存在,无疑是为表现层、行为层甚至内容层面的连接提供了一个绝佳的API,成为热门的Ajax应用中不可或缺的组成部分。

一、平稳退化

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>

0 条评论

还没有人评论。
您需要登录后才可以回复。登录 | 立即注册