為元素節點；"TEXT" 為文字節點； id="binary"、class="twbbs.org" 為屬性。三者皆為節點。的第一個 child 為，第二個為。 ==== document 物件 ==== === documentElement === 取得 HTML 文件的根元素。 var htmlElement = document.documentElement; === getElementByID(string ID) === === createElement(string ELEMENT) === 建立新的元素。 document.createElement("img"); 會產生新的元素。 === createTextNode() === 建立新的文字節點，然後加入某個元素中。 createTextNode("blah blah..."); === getElementByTagName(string TAG) === document 物件以及所有的元素節點均可使用此函式，取得物件或節點下，某個名稱的所有元素節點，且為槽狀(nested)，此函式 return 一個陣列。 document.getElementByTagName("div"); document.getElementByTagName("p")[0]; ==== Node －節點 ==== 利用 nodeName 取得節點名稱，nodeValue 取得節點的值。 ^ node ^ node type ^ nodeName ^ nodeValue ^ | div | 元素節點 | "div" | null/undefined | | em | 元素節點 | "em" | null/undefined | | "Head First" | 文字節點 | null/undefined | "Head First" | === parentNode === === childNodes === 取得節點全部的子節點，傳回一陣列。 === firstChild === 第一個子節點 === lastChild === 最後一個子節點 === getAttribute === === setAttribute === === getAttributeNode(string ATTR) === === replaceNode(new, old) === 將要加入的節點取代既有的子節點。 === insertBefore(new,added) === 將新節點插入舊有節點之前。 === appendChild(new) === 在最後面加入一節點。 ==== HTML ====


......
    // 當頁面一被載入，立刻執行
......


   // 許多  
   
   
......
  
   My Top 5 CDs
       // 將選擇的資料放入此處
  
......
   
......

==== Javascript ==== 將所有將上事件處理器 onClick()。在 Javascript 中的「事件處理器屬性」要使用小寫的 onclick 才可。


function addOnClickHandlers() {
  var cdsDiv = document.getElementById("cds");
  var cdImages = cdsDiv.getElementsByTagName("img");

  for (var i=0; i

透過「this」先取得被點擊的元素。

function addToTop5() {
  var imgElement = this;
  var top5Element = document.getElementById("top5");    // 目的地
  var numCDs = 0;

  for (var i=0; i 節點
    if (top5Element.childNodes[i].nodeName.toLowerCase() == "img")
      numCDs++;

  if (numCDs >= 5) {
    alert("You already have 5 CDs. Click \"Start Over\" to try again.");
    return;
  }

  top5Element.appendChild(imgElement);
  imgElement.onclick = null;    // 移除 onClick 事件處理

  // 新增一新節點，並插入指定位置，產生「1」
  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();
}