head rush ajax chapter4 DOM
《 Head Rush Ajax》website: http://www.headfirstlabs.com/books/hrajax/
document对象可以让你的JavaScript访问Web浏览器的DOM树。可以把<html>看作树的根。
getElementById()通过id属性找到页面中的元素。var mananger = document.getElementById("Mg").value;
documentElement属性，获取HTML文档的<html>根元素 var htmlElement = document.documentElement;
getElementByTagName()取得某个名字的所有节点，返回一个数组，必须用循环处理这个数组内的每个元素以取得特定元素。
var allDivs = document.getElementByTagName("div"); var firstPara = document.getElementByTagName("p")[0];
createElement() createTextNode()增加元素和文本。
var myImage = document.createElement("img");
var favshows = document.createTextNode("24 and lost");
DOM中有文本节点对象（标签之间的文本）和元素节点（标签），他们都是一个个节点，可以通过一个节点的parentNode,firstChild,lastChild获取相关节点，以及childNodes节点取得一个节点的全部子节点（是一个数组）
DOM树内的一切都是节点，包括标签的属性id、name等，元素和文本时特殊类型的节点，可以用nodeName取得节点名字，用nodeValue取得节点值。
元素节点有名字但是没有值，文本节点没有名字但是有值。
可以使用下面的条件语句判断：（部分浏览器不认识Node这个类，导致该方法不能运行）
if (someNode.nodeType == Node.ELEMENT_NODE){
//something done to ELEMENT_NODE
}else if(someNode.nodeType == Node.TEXT_NODE){
//文本节点
}
<script type="text/javascript" src="top5.js"> </script> //中间的空格千万不能忘记
JavaScript中的onclick和html页面中使用的onClick没有差别，写一个方法来负责事件处理器的设定，会比较灵活，而且可以多次调用这个方法。注意其中的大小写的差别。
<body>有个事件处理器，名为onload()，一旦页面被加载就立刻运行某个JavaScript函数。
在javascript函数中，可以通过使用this关键字来让你知道DOM树中的哪个节点调用此函数。
将一个元素加入另一个元素中。 div.replaceNode(img, img1):用要加入节点img取代现有节点img1
div.insertBefore(img,img3): 在某个子节点之前插入一个节点
div.appendChild(img):在所有的子节点最后附加一个节点。
表单中调用JavaScript函数，注意函数后面的括号和分号。<input type="button" value="Start Over" onClick="startOver();"/>
可以使用JavaScript程序代码查看甚至改变DOM树，你对DOM的改变会自动反应到浏览器所呈现的画面上。你也可以利用JavaScript为DOM树加入CSS样式和JavaScript事件处理器。
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(){
//将一张CD加入TOP 5
var imgElement = this; //一旦函数执行，this指向用户onclick的对应图片<img>元素
var top5Element = document.getElementById("top5"); //取得要加入图片的地方
var num = 0; //统计添加的图片数量
for(var i = 0; i<top5Element.childNodes.length; i++){//遍历元素的每一个子元素
if(top5Element.childNodes[i].nodeName.toLowerCase() == "img"){
num++; //统计元素中img元素的数量
}
}
if (num >= 5){//当图片数量超过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"); //创建一个新的span元素
newSpanElement.className = "rank"; //给元素指派CSS类
var newTextElement = document.createTextNode(num+1);//创建次序文本对象
newSpanElement.appendChild(newTextElement); //将文本添加到span的最后
top5Element.insertBefore(newSpanElement,imgElement); //在图像的前面插入新建的span元素
}
function startOver(){
//重新排序TOP5
var top5Element = document.getElementById("top5");
var cdsElement = document.getElementById("cds");//获取放图片的cds元素盒子
while (top5Element.hasChildNodes()){
var firstChild = top5Element.firstChild;
if(firstChild.nodeName.toLowerCase() == "img"){//依次将top5中的图片放入cds盒子中
cdsElement.appendChild(firstChild);
}else{
top5Element.removeChild(firstChild);//用来移除其他的子节点
}
}
addOnClickHandlers();//重新激活所有图片的事件处理，把null改为addToTop5
}
document对象可以让你的JavaScript访问Web浏览器的DOM树。可以把<html>看作树的根。
getElementById()通过id属性找到页面中的元素。var mananger = document.getElementById("Mg").value;
documentElement属性，获取HTML文档的<html>根元素 var htmlElement = document.documentElement;
getElementByTagName()取得某个名字的所有节点，返回一个数组，必须用循环处理这个数组内的每个元素以取得特定元素。
var allDivs = document.getElementByTagName("div"); var firstPara = document.getElementByTagName("p")[0];
createElement() createTextNode()增加元素和文本。
var myImage = document.createElement("img");
var favshows = document.createTextNode("24 and lost");
DOM中有文本节点对象（标签之间的文本）和元素节点（标签），他们都是一个个节点，可以通过一个节点的parentNode,firstChild,lastChild获取相关节点，以及childNodes节点取得一个节点的全部子节点（是一个数组）
DOM树内的一切都是节点，包括标签的属性id、name等，元素和文本时特殊类型的节点，可以用nodeName取得节点名字，用nodeValue取得节点值。
元素节点有名字但是没有值，文本节点没有名字但是有值。
可以使用下面的条件语句判断：（部分浏览器不认识Node这个类，导致该方法不能运行）
if (someNode.nodeType == Node.ELEMENT_NODE){
//something done to ELEMENT_NODE
}else if(someNode.nodeType == Node.TEXT_NODE){
//文本节点
}
<script type="text/javascript" src="top5.js"> </script> //中间的空格千万不能忘记
JavaScript中的onclick和html页面中使用的onClick没有差别，写一个方法来负责事件处理器的设定，会比较灵活，而且可以多次调用这个方法。注意其中的大小写的差别。
<body>有个事件处理器，名为onload()，一旦页面被加载就立刻运行某个JavaScript函数。
在javascript函数中，可以通过使用this关键字来让你知道DOM树中的哪个节点调用此函数。
将一个元素加入另一个元素中。 div.replaceNode(img, img1):用要加入节点img取代现有节点img1
div.insertBefore(img,img3): 在某个子节点之前插入一个节点
div.appendChild(img):在所有的子节点最后附加一个节点。
表单中调用JavaScript函数，注意函数后面的括号和分号。<input type="button" value="Start Over" onClick="startOver();"/>
可以使用JavaScript程序代码查看甚至改变DOM树，你对DOM的改变会自动反应到浏览器所呈现的画面上。你也可以利用JavaScript为DOM树加入CSS样式和JavaScript事件处理器。
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(){
//将一张CD加入TOP 5
var imgElement = this; //一旦函数执行，this指向用户onclick的对应图片<img>元素
var top5Element = document.getElementById("top5"); //取得要加入图片的地方
var num = 0; //统计添加的图片数量
for(var i = 0; i<top5Element.childNodes.length; i++){//遍历元素的每一个子元素
if(top5Element.childNodes[i].nodeName.toLowerCase() == "img"){
num++; //统计元素中img元素的数量
}
}
if (num >= 5){//当图片数量超过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"); //创建一个新的span元素
newSpanElement.className = "rank"; //给元素指派CSS类
var newTextElement = document.createTextNode(num+1);//创建次序文本对象
newSpanElement.appendChild(newTextElement); //将文本添加到span的最后
top5Element.insertBefore(newSpanElement,imgElement); //在图像的前面插入新建的span元素
}
function startOver(){
//重新排序TOP5
var top5Element = document.getElementById("top5");
var cdsElement = document.getElementById("cds");//获取放图片的cds元素盒子
while (top5Element.hasChildNodes()){
var firstChild = top5Element.firstChild;
if(firstChild.nodeName.toLowerCase() == "img"){//依次将top5中的图片放入cds盒子中
cdsElement.appendChild(firstChild);
}else{
top5Element.removeChild(firstChild);//用来移除其他的子节点
}
}
addOnClickHandlers();//重新激活所有图片的事件处理，把null改为addToTop5
}
