ddddd
dddd
 
top5.html-------------------
<html>
 <head>
  <title>Top 5 CD Recommendations</title>
  <link rel="stylesheet" type="text/css" href="top5.css" />
  <script type="text/javascript" src="top5.js"> </script>
 </head>
 
 <body onLoad="addOnClickHandlers();">
  <div id="instructions">
   Click on a CD cover to add it to the Top 5 list. If you want to start over, click the "Start Over" button to clear the Top 5 list.
  </div>
 
  <div id="cds">
   <img class="cover" src="images/vaughan_flood.jpg" 
                      alt="Texas Flood, by Stevie Ray Vaughan" />
   <img class="cover" src="images/clapton_cream.jpg" 
                      alt="The Cream of Clapton, by Eric Clapton" />
   <img class="cover" src="images/mayer_try.jpg" 
                      alt="Try! Live, by John Mayer Trio" />
   <img class="cover" src="images/waters_live.jpg" 
                      alt="Live, by Muddy Waters" />
   <img class="cover" src="images/house_delta.jpg" 
                      alt="Original Delta Blues, by Son House" />
   <img class="cover" src="images/cream_live.jpg" 
                      alt="Royal Albert Hall, by Cream" />
   <img class="cover" src="images/shepherd_ledbetter.jpg" 
                      alt="Ledbetter Heights, by Kenny Wayne Shepherd" />
   <img class="cover" src="images/johnson_complete.jpg" 
                      alt="The Complete Recordings, by Robert Johnson" />
   <img class="cover" src="images/hendrix_experience.jpg"  
                      alt="Are You Experienced, by Jimmi Hendrix" />
   <img class="cover" src="images/jorma_blues.jpg"  
                      alt="Blue Country Heart, by Jorma Kaukonen" />
   <img class="cover" src="images/johnson_wizard.jpg"  
                      alt="The Original Guitar  Wizard, by Lonnie Johnson" />
   <img class="cover" src="images/lang_lie.jpg"  
                      alt="Lie to Me, by Jonny Lang" />
  </div>
 
  <div id="top5-listings">
   <h2>My Top 5 CDs</h2>
   <div id="top5"></div>
  </div>
 
  <form>
   <input type="button" value="Start Over" onClick="startOver();" />
  </form>
 </body>
</html>
test.html----------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
    <style>
        .rank{
            position: absolute;
            text-align: center;
            top: 20px;
            left: 20px;
            font-size: small;
            background-color: yellow;
            color: black;
            border: thin solid white;
            width: 80px;
            height: 80px;
            z-index: 99;
         }
         #div1 {
 height:        270px;
 padding:       10px;
 border: thin solid red; 
 background-color: purple;
 margin:        auto 20px auto 20px;
}
 
    </style>
    <script language="javascript">
        //在Dom树内，一切都是节点： 元素，文本，属性，注释。
        //节点元素有getAttribute() 和 setAttribute()
        var manganese = document.getElementById('xx').value;
        var firstData = document.getElementByTagName("p")[0];
        var htmlElement = document.documentElement;//HTML文档的<html>根元素
        var myImage = document.createElement("img");
        var favShows = document.createTextNode("24 and lost");
        divNode.parentNode;
        divNode.childnodes;
        divNode.firstChild;
        divNode.lastChild;
        divNode.nodeName;
        divNode.nodeValue;//nul / undefined
        divNode.nodeType;
        // 每种节点类型(元素, 文本, 属性)都具有一个数字。但是尽力不用Node,很多浏览器不支持。
        if(someNode.nodeType == Node.ELEMENT_NODE){
            //DO SOMETHING FOR ELEMENT
        }else if (someNode.nodeType == Node.TEXT_NODE) {
            // DO SOMETHING FOR TEXTNODE
        }
        divNode.parentNode.getAttribute("id").nodeValue;
        //替代 删除 追加
        //onclick()
        divNode.appendChild(imgElement);
        divNode.insertBefore(imgElement);
        divNode.replaceNode(imgElement);
        document.getElementById("top5").childNodes.length;
        document.getElementById("top5").childNodes[i].nodeName.toLowerCase();
    </script>
    
    <script language="javascript"> 
function document.onkeydown() { 
 if(event.keyCode == 13) { 
  document.getElementById("enter").click(); 
  return false; 
 } 
} 
</script> 
</head>
<body>
    <p style="color: red">hello world</p>
     <div id="div1">
         <br/>
         <span class="rank">this is a span</span>   
         <br/>
     </div>
 
 
<input type="button" id="enter" value="enter" οnclick="alert('enter');"/> 
<input type="button" value="123" οnclick="alert('123');" /> 
</body>
</html>
 
top5.js--------------
function addOnClickHandlers() {
  var cdsDiv = document.getElementById("cds");
  var cdImages = cdsDiv.getElementsByTagName("img");
  for (var i=0; i<cdImages.length; i++) {
    cdImages[i].onclick = addToTop5;
  }
}
 
function addToTop5() {
  var imgElement = this;
  var top5Element = document.getElementById("top5");
  var numCDs = 0;
 
  for (var i=0; i<top5Element.childNodes.length; i++) {
    if (top5Element.childNodes[i].nodeName.toLowerCase() == "img") {
      numCDs = numCDs + 1;
    }
  }
  if (numCDs >= 5) {
    alert("You already have 5 CDs. Click \"Start Over\" to try again.");
    return;
  }
 
  top5Element.appendChild(imgElement);
  imgElement.onclick = null;
 
  var newSpanElement = document.createElement("span");
  newSpanElement.className = "rank";
  var newTextElement = document.createTextNode(numCDs + 1);
  newSpanElement.appendChild(newTextElement);
  top5Element.insertBefore(newSpanElement, imgElement);
}
 
function startOver() {
  var top5Element = document.getElementById("top5");
  var cdsElement = document.getElementById("cds");
  while (top5Element.hasChildNodes()) {
    var firstChild = top5Element.firstChild;
    if (firstChild.nodeName.toLowerCase() == "img") {
      cdsElement.appendChild(firstChild);
    } else {
      top5Element.removeChild(firstChild);
    }
  }
 
  addOnClickHandlers();
}
top5.css-------------
body {
  font-family:   "Comic Sans MS", Verdana, sans-serif;
  text-align:    center;
}
 
#instructions {
  margin:        20px 200px;
}
 
#cds {
  width:         400px;
  margin:        20px auto 20px auto;
}
 
form {
  position:      relative;
  margin:        50px auto auto auto;
}
 
img.cover {
  height:        70px;
  padding:       10px; 
}
 
#top5-listings {
  margin:        50px auto;
}
 
#top5 {
  position:      relative;
  border-top:    thin solid black; 
  margin:        10px auto 10px auto;
  width:         650px;
  padding:       10px;
  text-align:    left;
}
 
#top5 img {
  position:   relative;
  height:        100px;
  padding:         0px;
  margin:         10px;
  top:            10px;
  left:            5px;
  z-index:           1;
}
 
.rank {
  position:         absolute;
  text-align:       center;
  top:              20px;
  font-size:        small;
  background-color: black;
  color:            white;
  border:           thin solid white;
  width:            20px;
  z-index:            99;
}