目錄表

Head Rush Ajax 讀書筆記
- Chapter Four

Head Rush Ajax 讀書筆記

Chapter Four

「document」物件讓 Javascript 存取網頁瀏覽器的 DOM 樹。

<a>、<p> 為元素節點；“TEXT” 為文字節點； id=“binary”、class=“twbbs.org” 為屬性。三者皆為節點。

<html> 的第一個 child 為 <head>，第二個為 <body>。

document 物件

documentElement

取得 HTML 文件的 <html> 根元素。

var htmlElement = document.documentElement;

getElementByID(string ID)

createElement(string ELEMENT)

建立新的元素。

document.createElement("img");

會產生新的 <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

......
<body onLoad="addOnClickHandlers();">    // 當頁面一被載入，立刻執行
......
  <div id="cds">
   // 許多 <img> 
   <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" />
......
  <div id="top5-listings">
   <h2>My Top 5 CDs</h2>
   <div id="top5"></div>    // 將選擇的資料放入此處
  </div>
......
   <input type="button" value="Start Over" onClick="startOver();" />
......

Javascript

將所有 <img> 將上事件處理器 onClick()。

在 Javascript 中的「事件處理器屬性」要使用小寫的 onclick 才可。

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

  for (var i=0; i<cdImages.length; i++) {
    cdImages[i].onclick = addToTop5;
  }
}

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

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

  for (var i=0; i<top5Element.childNodes.length; i++)    // 計算目的地已經有多少 <img> 節點
    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 事件處理

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

目錄表