head rush ajax chapter4 DOM
生活随笔
收集整理的這篇文章主要介紹了
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
}
轉載于:https://www.cnblogs.com/aquar/archive/2010/04/15/3451467.html
總結
以上是生活随笔為你收集整理的head rush ajax chapter4 DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 广州五羊雕像特色
- 下一篇： Myeclipse中Tomcat的两种部