先推荐一篇文章：https://www.jianshu.com/p/af140806eb3b
本文作者对《JavaScript DOM编程艺术》进行了较好的总结。
综合案例
制作一个乐队介绍网站。运用前4篇文章介绍的所有知识。
在阅读本文之前请先阅读前4篇文章。如有疑问请参考原著作《JavaScript DOM编程艺术》（第二版）第十二章
效果图
*有动画效果
代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jay Skript and the Domsters</title>
<script type="text/javascript" src="scripts/modernizr-1.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Welcome</h1>
<p id="intro">Welcome to the official website of Jay Skript and the Domsters. Here, you can <a href="about.html">learn more about the band</a>, view <a href="photos.html">photos of the band</a>, find out about <a href="live.html">tour dates</a> and <a href="contact.html">get in touch with the band</a>.</p>
</article>
<script type="text/javascript" src="scripts/global.js"></script>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jay Skript and the Domsters</title>
<script type="text/javascript" src="scripts/modernizr-1.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>About the band</h1>
<nav>
<ul>
<li><a href="#jay">Jay Skript</a></li>
<li><a href="#domsters">The Domsters</a></li>
</ul>
</nav>
<section id="jay">
<h2>Jay Skript</h2>
<p>Jay Skript is going to rock your world!</p>
<p>Together with his compatriots The Domsters,
Jay is set for world domination. Just you wait and see.</p>
<p>Jay Skript has been on the scene since the mid nineties.
His talent hasn't always been recognized or fully appreciated.
In the early days, he was often unfavorably compared to bigger,
similarly-named artists. That's all in the past now.</p>
</section>
<section id="domsters">
<h2>The Domsters</h2>
<p>The Domsters have been around, in one form or another,
for almost as long. It's only in the past few years that The Domsters
have settled down to their current, stable line-up.
Now they're a rock-solid bunch: methodical and dependable.</p>
</section>
</article>
<script type="text/javascript" src="scripts/global.js"></script>
</body>
</html>
photos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jay Skript and the Domsters</title>
<script type="text/javascript" src="scripts/modernizr-1.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Photos of the band</h1>
<ul id="imagegallery">
<li><a href="images/photos/concert.jpg" title="The crowd goes wild"><img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" />
</a></li>
<li><a href="images/photos/bassist.jpg" title="An atmospheric moment"><img src="images/photos/thumbnail_bassist.jpg" alt="the bassist" /></a></li>
<li><a href="images/photos/guitarist.jpg" title="Rocking out"><img src="images/photos/thumbnail_guitarist.jpg" alt="the guitarist" /></a></li>
<li><a href="images/photos/crowd.jpg" title="Encore! Encore!"><img src="images/photos/thumbnail_crowd.jpg" alt="the audience" /></a></li>
</ul>
</article>
<script type="text/javascript" src="scripts/global.js"></script>
</body>
</html>
live.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jay Skript and the Domsters</title>
<script type="text/javascript" src="scripts/modernizr-1.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Tour dates</h1>
<table summary="when and where you can see the band">
<thead>
<tr>
<th>Date</th>
<th>City</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland, <abbr title="Oregon">OR</abbr></td>
<td>Crystal Ballroom</td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle, <abbr title="Washington">WA</abbr></td>
<td>Crocodile Cafe</td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento, <abbr title="California">CA</abbr></td>
<td>Torch Club</td>
</tr>
<tr>
<td>June 17th</td>
<td>Austin, <abbr title="Texas">TX</abbr></td>
<td>Speakeasy</td>
</tr>
</tbody>
</table>
</article>
<script type="text/javascript" src="scripts/global.js"></script>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jay Skript and the Domsters</title>
<script type="text/javascript" src="scripts/modernizr-1.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact the band</h1>
<form method="post" action="submit.html">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id='name' name="name" placeholder="Your name" required="required"/>
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required">
</p>
<p>
<label for="message">Message:</label>
<textarea cols="45" rows="7" id="message" name="message" required="required" placeholder="Write your message here."></textarea>
</p>
<input type="submit" value="Send"/>
</fieldset>
</form>
</article>
<script type="text/javascript" src="scripts/global.js"></script>
</body>
</html>
basic.css
@import url(layout.css);
@import url(color.css);
@import url(typography.css);
color.css
body {
color: #fb5;
background-color: #334;
}
a:link {
color: #445;
background-color: #eb6;
}
a:visited {
color: #345;
background-color: #eb6;
}
a:hover {
color: #667;
background-color: #fb5;
}
a:active {
color: #778;
background-color: #ec8;
}
header {
color: #ec8;
background-color: #334;
border-color: #667;
}
header nav {
color: #455;
background-color: #789;
border-color: #667;
}
article {
color: #223;
background-color: #edc;
border-color: #667;
}
header nav ul {
border-color: #99a;
}
header nav a:link,header nav a:visited {
color: #eef;
background-color: transparent;
border-color: #99a;
}
header nav a:hover {
color: #445;
background-color: #eb6;
}
header nav a:active {
color: #667;
background-color: #ec8;
}
article img {
border-color: #ba9;
outline-color: #dcb;
}
#imagegallery a {
background-color: transparent;
}
header nav a.here:link,
header nav a.here:visited,
header nav a.here:hover,
header nav a.here:active {
color: #eef;
background-color: #799;
}
th {
color: #edc;
background-color: #455;
}
tr td {
color: #223;
background-color: #eb6;
}
tr.odd td {
color: #223;
background-color: #ec8;
}
tr.highlight td {
color: #223;
background-color: #cba;
}
input.placeholder{
color: grey;
}
typography.css
body {
font-size: 76%;
font-family: "Helvetica","Arial",sans-serif;
}
body * {
font-size: 1em;
}
a {
font-weight: bold;
text-decoration: none;
}
header nav {
font-family: "Lucida Grande","Helvetica","Arial",sans-serif;
}
header nav a {
text-decoration: none;
font-weight: bold;
}
article {
line-height: 1.8em;
}
article p {
margin: 1em 0;
}
h1 {
font-family: "Georgia","Times New Roman",sans-serif;
font: 2.4em normal;
}
h2 {
font-family: "Georgia","Times New Roman",sans-serif;
font: 1.8em normal;
margin-top: 1em;
}
h3 {
font-family: "Georgia","Times New Roman",sans-serif;
font: 1.4em normal;
margin-top: 1em;
}
#imagegallery li {
list-style-type: none;
}
textarea {
font-family: "Helvetica","Arial",sans-serif;
}
dt {
margin-right: 1em;
}
dd {
margin-right: 3em;
}
layout.css
section,header,article,nav{
display: block;
}
*{
padding: 0;
margin: 0;
}
body{
margin: 1em 10%;
background-image: url(../images/background.gif);
background-attachment: fixed;
background-position: top left;
background-repeat: repeat-x;
max-width: 80em;
}
header{
background-image: url(../images/guitarist.gif);
background-repeat: no-repeat;
background-position: bottom right;
border-width: .1em;
border-style: solid;
border-bottom-width: 0;
}
#about header{
background-image: url(../images/lineup.gif);
}
#photos header{
background-image: url(../images/basshead.gif);
}
#live header{
background-image: url(../images/bassist.gif);
}
#contact header{
background-image: url(../images/drummer.gif);
}
header nav{
background-image: url(../images/navbar.gif);
background-repeat: repeat-x;
border-width: .1em;
border-style: solid;
border-bottom-width: 0;
border-top-width: 0;
padding-left: 10%;
}
header nav ul{
width: 100%;
overflow: hidden;
border-left-width: .1em;
border-left-style: solid;
}
header nav ul li{
display: inline;
}
header nav ul li a{
display: inline-block;
float: left;
padding: .5em 2em;
border-right: .1em solid;
}
article{
border-width: .1em;
border-style: solid;
border-top-width: 0;
padding: 2em 10%;
line-height: 1.8em;
}
article img{
border-width: .1em;
border-style: solid;
outline-width: .1em;
outline-style: solid;
}
#slideshow{
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
#preview{
position: absolute;
border-width: 0;
outline-width: 0;
}
#imagegallery li{
display: inline;
}
td{
padding: .5em 3em;
}
th{
color:#edc;
background-color: #455;
}
tr td{
color:#223;
background-color: #eb6;
}
dl{
overflow: hidden;
}
dt{
float: left;
}
dd{
float: left;
}
label{
display: block;
}
fieldset{
border: 0;
}
global.js
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function')window.onload = func;
else{
window.onload = function(){
oldonload();
func();
}
}
}
function insertAfter(newElem,targetElem){
var parent = targetElem.parentNode;
if(parent.lastChild == targetElem)parent.appendChild(newElem);
else parent.insertBefore(newElem,targetElem.nextSibling);
}
function addClass(elem,value){
if(!elem.className)elem.className = value;
else{
newClassName = elem.className+" "+value;
elem.className = newClassName;
}
}
function highlightPage(){
if(!document.getElementsByTagName||!document.getElementById)return false;
var headers = document.getElementsByTagName('header');
if(headers.length == 0)return false;
var navs = headers[0].getElementsByTagName('nav');
if(navs.length == 0)return false;
var links = navs[0].getElementsByTagName('a');
var linkurl;
for(var i=0;i<links.length;i++){
linkurl = links[i].getAttribute('href');
if(window.location.href.indexOf(linkurl)!=-1){
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute('id',linktext);
}
}
}
function moveElem(elemID,final_x,final_y,interval){
if(!document.getElementById||!document.getElementById(elemID))return false;
var elem = document.getElementById(elemID);
if(elem.movement)clearTimeout(elem.movement);
if(!elem.style.left)elem.style.left = '0px';
if(!elem.style.top)elem.style.top = '0px';
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y)return true;
if(xpos < final_x)
xpos = xpos + Math.ceil((final_x-xpos)/10);
if(xpos > final_x)
xpos = xpos - Math.ceil((xpos-final_x)/10);
if(ypos < final_y)
ypos = ypos + Math.ceil((final_y-ypos)/10);
if(ypos < final_y)
ypos = ypos - Math.ceil((ypos-final_y)/10);
elem.style.left = xpos + 'px';
elem.style.right = ypos + 'px';
elem.movement = setTimeout("moveElem('"+elemID+"',"+final_x+","+final_y+","+interval+")",interval);
}
function prepareSlideshow(){
if(!document.getElementsByTagName||!document.getElementById||!document.getElementById("intro"))return false;
var intro = document.getElementById("intro");
var slideshow = document.createElement("div");
slideshow.setAttribute('id',"slideshow");
var preview = document.createElement("img");
preview.setAttribute('src','images/slideshow.gif');
preview.setAttribute('alt','a glimpse of what awaits you');
preview.setAttribute('id','preview');
slideshow.appendChild(preview);
insertAfter(slideshow,intro);
var links = document.getElementsByTagName("a");
var destination;
for(var i=0;i<links.length;i++){
links[i].onmouseover = function(){
destination = this.getAttribute('href');
if(destination.indexOf("index.html")!=-1)moveElem("preview",0,0,5);
if(destination.indexOf("about.html")!=-1)moveElem("preview",-150,0,5);
if(destination.indexOf("photos.html")!=-1)moveElem("preview",-300,0,5);
if(destination.indexOf("live.html")!=-1)moveElem("preview",-450,0,5);
if(destination.indexOf("contact.html")!=-1)moveElem("preview",-600,0,5);
}
}
}
function showSection(id){
var sections = document.getElementsByTagName("section");
for(var i=0;i<sections.length;i++){
if(sections[i].getAttribute('id')==id)
sections[i].style.display = "block";
else sections[i].style.display = "none";
}
}
function prepareInternalnav(){
if(!document.getElementsByTagName||!document.getElementById)return fase;
var articles = document.getElementsByTagName('article');
if(articles.length == 0)return false;
var navs = articles[0].getElementsByTagName("nav");
if(navs.length == 0)return false;
var nav = navs[0];
var links = nav.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
var sectionId = links[i].getAttribute("href").split("#")[1];
if(!document.getElementById(sectionId))continue;
document.getElementById(sectionId).style.display = 'none';
links[i].destination = sectionId;
links[i].onclick = function(){
showSection(this.destination);
return false;
}
}
}
function showPic(pic){
if(!document.getElementById('placeholder'))return true;
var source = pic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src',source);
if(!document.getElementById('description'))return false;
if(pic.getAttribute('titile'))var text = pic.getAttribute('titile');
else var text = '';
var description = document.getElementById('description');
if(description.firstChild.nodeType == 3)
description.firstChild.nodeValue = text;
return false;
}
function preparePlaceholder(){
if(!document.createElement||!document.createTextNode||!document.getElementById||!document.getElementById('imagegallery'))return false;
var placeholder = document.createElement('img');
placeholder.setAttribute('id','placeholder');
placeholder.setAttribute('src','images/placeholder.gif');
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(description,gallery);
insertAfter(placeholder,description);
}
function prepareGallery(){
if(!document.getElementsByTagName||!document.getElementById||!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);
}
}
function stripeTables(){
if(!document.getElementsByTagName)return false;
var tables = document.getElementsByTagName('table');
for(var i=0;i<tables.length;i++){
var odd = false;
var rows = tables[i].getElementsByTagName('tr');
for(var j=0;j<rows.length;j++){
if(odd == true){
addClass(rows[j],'odd');
odd = false;
}else odd = true;
}
}
}
function highlightRows(){
if(!document.getElementsByTagName)return false;
var rows = document.getElementsByTagName('tr');
for(var i=0;i<rows.length;i++){
rows[i].oldClassName = rows[i].className;
rows[i].onmouseover = function(){
addClass(this,'highlight');
}
rows[i].onmouseout = function(){
this.className = this.oldClassName;
}
}
}
function displayAbbreviations(){
if(!document.getElementsByName||!document.createElement||!document.createTextNode)return false;
var abbreviations = document.getElementsByTagName('abbr');
if(abbreviations.length < 1)return false;
var defs = new Array();
for(var i=0;i<abbreviations.length;i++){
var cur_abbr = abbreviations[i];
if(cur_abbr.childNodes.length<1)continue;
var definition = cur_abbr.getAttribute('title');
var key = cur_abbr.lastChild.nodeValue;
defs[key] = definition;
}
var dlist = document.createElement('dl');
for(key in defs){
var definition = defs[key];
var dtitle = document.createElement('dt');
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
var ddesc = document.createElement('dd');
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if(dlist.childNodes.length < 1)return false;
var header = document.createElement('h3');
var header_text = document.createTextNode('Abbreviations');
header.appendChild(header_text);
var articles = document.getElementsByTagName('article');
if(articles.length == 0)return false;
var container = articles[0];
container.appendChild(header);
container.appendChild(dlist);
}
function focusLabels(){
if(!document.getElementsByName)return false;
var labels = document.getElementsByName("label");
for(var i=0;i<labels.length;i++){
if(!labels[i].getAttribute("for"))continue;
labels[i].onclick = function(){
var id = this.getAttribute("for");
if(!document.getElementById(id))return false;
var element = document.getElementById(id);
element.focus();
}
}
}
function resetFields(form){
if(Modernizr.input.placeholder)return;
for(var i=0;i<form.elements.length;i++){
var element = form.elements[i];
if(element.type == 'submit')continue;
var check = element.placeholder || element.getAttribute('placeholder');
if(!check)continue;
element.onfocus = function(){
var text = this.placeholder||this.getAttribute('placeholder');
if(this.value == text){
this.className = '';
this.value = "";
}
}
element.onblur = function(){
if(this.value == ''){
this.className = 'placeholder';
this.value = this.placeholder || this.getAttribute('placeholder');
}
}
element.onblur();
}
}
function prepareForms(){
for(var i=0;i<document.forms.length;i++){
var form = document.forms[i];
resetFields(form);
form.onsubmit = function(){
if(!validateForm(this))return false;
var article = document.getElementsByTagName('article')[0];
if(submitFormWithAjax(this,article))return false;//拦截默认行为
return true;
}
}
}
function isFilled(field){
if(field.value.replace(' ','').length==0)return false;
var placeholder = field.placeholder || field.getAttribute('placeholder');
return (field.value != placeholder);
}
function isEmail(field){
return (field.value.indexOf('@')!=-1 && field.value.indexOf('.')!=-1);
}
function validateForm(form){
for(var i=0;i<form.elements.length;i++){
var elem = form.elements[i];
if(elem.required == 'required'){
if(!isFilled(elem)){
alert("Please fill in the "+elem.name+" field.");
return false;
}
}
if(elem.type == 'email'){
if(!isEmail(elem)){
alert("The "+elem.name+" field must be a valid email address.");
return false;
}
}
}
return true;
}
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined"){//兼容IE
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
}
return new XMLHttpRequest();
}
function displayAjaxLoading(elem){
while(elem.hasChildNodes())
elem.removeChild(elem.lastChild);
var content = document.createElement('img');
content.setAttribute('src','images/loading.gif');
content.setAttribute('alt','Loading...');
elem.appendChild(content);
}
function submitFormWithAjax(form,target){
var request = getHTTPObject();
if(!request)return false;
displayAjaxLoading(target);
var dataParts = [],elem;
for(var i=0;i<form.elements.length;i++){
elem = form.elements[i];
dataParts[i] = elem.name+'='+encodeURIComponent(elem.value);
}
var data = dataParts.join('&');
request.open('POST',form.getAttribute('action'),true);//async
request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 0){
var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);
if(matches.length > 0)target.innerHTML = matches[1];
else target.innerHTML = '<p>Oops, there was an error. Sorry.</p>';
}else target.innerHTML = '<p>'+request.statusText+'</p>';
}
};
request.send(data);
return true;
}
addLoadEvent(highlightPage);
addLoadEvent(prepareSlideshow);
addLoadEvent(prepareInternalnav);
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
addLoadEvent(displayAbbreviations);
addLoadEvent(prepareForms);
转载：https://blog.csdn.net/qq_33583069/article/details/101171665
查看评论