AJAX開發簡略續一(2)

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Element常用的方法：

方法	描述
getAttribute()	以字串形式返回指定屬性的值。
getAttributeNode()	以Attr節點的形式返回指定屬性的值。
getElementsByTabName()	返回一個Node數組，包含具有指定標記名的所有Element節點的子孫節點，其順序為在文檔中出現的順序。
hasAttribute()	如果該元素具有指定名字的屬性，則返回true。
removeAttribute()	從元素中刪除指定的屬性。
removeAttributeNode()	從元素的屬性列表中刪除指定的Attr節點。
setAttribute()	把指定的屬性設定為指定的字串值，如果該屬性不存在則添加一個新屬性。
setAttributeNode()	把指定的Attr節點添加到該元素的屬性列表中。

Attr對象代表文件項目的屬性，有name、value等屬性，可以通過Node介面的attributes屬性或者調用Element介面的getAttributeNode()方法來擷取。不過，在大多數情況下，使用Element元素屬性的最簡單方法是getAttribute()和setAttribute()兩個方法，而不是Attr對象。7.4.3、使用DOM操作HTML文檔Node對象定義了一系列屬性和方法，來方便遍曆整個文檔。用parentNode屬性和childNodes[]數組可以在文檔樹中上下移動；通過遍曆childNodes[]數組或者使用firstChild和nextSibling屬性進行迴圈操作，也可以使用lastChild和previousSibling進行逆向迴圈操作，也可以枚舉指定節點的子節點。而調用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改變一個節點的子節點從而改變文檔樹。需要指出的是，childNodes[]的值實際上是一個NodeList對象。因此，可以通過遍曆childNodes[]數組的每個元素，來枚舉一個給定節點的所有子節點；通過遞迴，可以枚舉樹中的所有節點。下表列出了Node對象的一些常用屬性和方法：Node對象常用屬性：

屬性	描述
attributes	如果該節點是一個Element，則以NamedNodeMap形式返回該元素的屬性。
childNodes	以Node[]的形式存放當前節點的子節點。如果沒有子節點，則返回空數組。
firstChild	以Node的形式返回當前節點的第一個子節點。如果沒有子節點，則為null。
lastChild	以Node的形式返回當前節點的最後一個子節點。如果沒有子節點，則為null。
nextSibling	以Node的形式返回當前節點的兄弟下一個節點。如果沒有這樣的節點，則返回null。
nodeName	節點的名字，Element節點則代表Element的標記名稱。
nodeType	代表節點的類型。
parentNode	以Node的形式返回當前節點的父節點。如果沒有父節點，則為null。
previousSibling	以Node的形式返回緊挨當前節點、位於它之前的兄弟節點。如果沒有這樣的節點，則返回null。

Node對象常用方法：

方法	描述
appendChild()	通過把一個節點增加到當前節點的childNodes[]組，給文檔樹增加節點。
cloneNode()	複製當前節點，或者複製當前節點以及它的所有子孫節點。
hasChildNodes()	如果當前節點擁有子節點，則將返回true。
insertBefore()	給文檔樹插入一個節點，位置在當前節點的指定子節點之前。如果該節點已經存在，則刪除之再插入到它的位置。
removeChild()	從文檔樹中刪除並返回指定的子節點。
replaceChild()	從文檔樹中刪除並返回指定的子節點，用另一個節點替換它。

接下來，讓我們使用上述的DOM應用編程介面，來試著操作HTML文檔。A、遍曆文檔的節點DOM把一個HTML文檔視為樹，因此，遍曆整個樹是應該是家常便飯。跟之前說過的一樣，這裡我們提供兩個遍曆樹的例子。通過它，我們能夠學會如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍曆整棵樹。例子1-- sample3_1.htm：這個例子使用了childNodes[]和遞迴方式來遍曆整個文檔，統計文檔中出現的Element元素總數，並把Element標記名全部列印出來。需要特別注意的是，在使用DOM時，必須等文檔被裝載完畢再執行遍曆等行為操作文檔。sample3_1.htm具體代碼如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>無標題文檔</title><script language="javascript">var elementName = ""; //全域變數，儲存Element標記名，使用完畢要清空function countTotalElement(node) { //參數node是一個Node對象 var total = 0; if(node.nodeType == 1) { //檢查node是否為Element對象 total++; //如果是，計數器加1 elementName = elementName + node.tagName + "/r/n"; //儲存標記名 } var childrens = node.childNodes; //擷取node的全部子節點 for(var i=0;i<childrens.length;i++) { total += countTotalElement(childrens[i]); //在每個子節點上進行遞迴操作 } return total;}</script></head><body><a href="javascript :void(0)" onClick="alert('標記總數：' + countTotalElement(document) + '/r/n全部標記如下：/r/n' + elementName);elementName='';">開始統計</a></body></html>運行效果如下：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More