DOM的含义：Document（文档）、Object（对象）、Model（模型）
这本书的第一遍算是看完了，主要讲了DOM语句的使用方法，涉及到结构行为样式的分离、向后兼容和平稳退化、动态创建标记、动画、网页加载性能优化还有一些实用案例等。其中还有些没太懂的地方，比如第七章提到的Ajax，以及第12章综合示例里用到Ajax的代码，回头再仔细看。只简单整理了前半部分图片库逐步改进的代码，最后的综合示例没有自己写，把源码copy来仔细看了下，太长，就不放在这了。
图片库最初版
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display" οnclick="showPic(this); return false;">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" οnclick="showPic(this); return false;">Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose" οnclick="showPic(this); return false;">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock" οnclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}改进版
让行为和样式分离，并加入平稳退化，考虑向后兼容，所以用if先进行事件检测。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript" src="showPic.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="img/gallery1.jpg" title="gallery1">
<img src="img/gallery1.jpg">
</a>
</li>
<li>
<a href="img/gallery2.jpg" title="gallery2">
<img src="img/gallery2.jpg">
</a>
</li>
<li>
<a href="img/gallery5.jpg" title="gallery3">
<img src="img/gallery5.jpg">
</a>
</li>
<li>
<a href="img/gallery3.jpg" title="gallery4">
<img src="img/gallery3.jpg">
</a>
</li>
</ul>
<!-- <img id="placeholder" src="img/liuchutian3.jpg" alt="my image gallery">
<p id="description">Choose an image.</p> -->
</body>
</html>注释部分注释掉之后，改为用JS函数动态创建标记。
JS代码：
//多个页面加载程序
function addLoadEvent(func){
var oldοnlοad=window.onload;
if(typeof window.onload !='function'){
window.οnlοad=func;
}else{
window.οnlοad=function(){
oldonload();
func();
};
}
}
//在某个元素后面插入新元素
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if (parent.lastChild==targetElement){
parent.appentChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//创建显示部分并插入到点击列表的后面
function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder=document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","img/liuchutian3.jpg");
placeholder.setAttribute("alt","my image gallery");
var description=document.createElement("p");
description.setAttribute("id","description");
var desctext=document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery=document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
//对每个链接添加点击事件
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery= document.getElementById("imagegallery");
var links=gallery.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
//替换显示图片和文字
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
5195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
