Javascript DOM编程艺术（第二版）读书笔记
程序员文章站
2022-03-06 12:04:39
...
今天，刚好把这本书看完第一遍，但是感觉囫囵吞枣式的看书方法并没有让我有更多的收获，故决定回头再过一遍，一下是我的读书（复习）笔记：
1.平稳退化：所谓平稳退化就是如果用户在浏览你的网页关闭了javascript选项仍然能够顺利地浏览你的网页，这就是所谓的平稳退化。
例如：
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="1.png" title="tupian1" onclick="showPic(this);return false;">图片1</a>
</li>
<li>
<a href="2.jpg" title="tupian2" onclick="showPic(this);return false;">图片2</a>
</li>
<li>
<a href="3.jpg" title="tupian3" onclick="showPic(this);return false;">图片3</a>
</li>
<li>
<a href="4.jpg" title="tupian4" onclick="showPic(this);return false;">图片4</a>
</li>
</ul>
<img id="placeholder" src="1.png" alt="图片预览" width="400px">
<p id="description">图片预览</p>
</body>
当用户点击网页上面的一张图片链接时，用户界面会自动刷新该页面并进入到图片显示页面。
<script>
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
showPic(this);
return false;
}
}
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
在文档标记的基础上添加js代码：
定义showpic函数：点击某一张图片链接，跳转的不是一个新的页面,而是显示在指定id为placeholder的img标签
以上代码即使用户关闭了javascript支持也能够访问到网页的核心内容。
2.渐进增强：就是用一些额外的信息层去包裹原始数据，使用渐进增强的法创建出来的网页往往都支持平稳退化，上买的js代码就是一个属性渐进增强的例子。
上一篇： Hadoop自定义读取文件
推荐阅读