Sars' History

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== 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 ====
<code>
......
<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();" />
......
</code>

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

在 Javascript 中的「事件處理器屬性」要使用小寫的 onclick 才可。
<code>
function addOnClickHandlers() {
  var cdsDiv = document.getElementById("cds");
  var cdImages = cdsDiv.getElementsByTagName("img");

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

透過「this」先取得被點擊的元素。
<code>
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);
}
</code>
<code>
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();
}
</code>
Sars' History

使用者工具

網站工具

頁面工具
