「document」物件讓 Javascript 存取網頁瀏覽器的 DOM 樹。
<a>、<p> 為元素節點;“TEXT” 為文字節點; id=“binary”、class=“twbbs.org” 為屬性。三者皆為節點。
<html> 的第一個 child 為 <head>,第二個為 <body>。
取得 HTML 文件的 <html> 根元素。
var htmlElement = document.documentElement;
建立新的元素。
document.createElement("img");
會產生新的 <img> 元素。
建立新的文字節點,然後加入某個元素中。
createTextNode("blah blah...");
document 物件以及所有的元素節點均可使用此函式,取得物件或節點下,某個名稱的所有元素節點,且為槽狀(nested),此函式 return 一個陣列。
document.getElementByTagName("div"); document.getElementByTagName("p")[0];
利用 nodeName 取得節點名稱,nodeValue 取得節點的值。
node | node type | nodeName | nodeValue |
---|---|---|---|
div | 元素節點 | “div” | null/undefined |
em | 元素節點 | “em” | null/undefined |
“Head First” | 文字節點 | null/undefined | “Head First” |
取得節點全部的子節點,傳回一陣列。
第一個子節點
最後一個子節點
將要加入的節點取代既有的子節點。
將新節點插入舊有節點之前。
在最後面加入一節點。
...... <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();" /> ......
將所有 <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(); }