AJAX開發簡略續一 3

2021-04-02 23:05:21 字數 2281 閱讀 4657

例子2 – sample3_2.htm:

接下來使用firstchile、lastchild、nextsibling、previoussibling遍歷整個文件樹。修改一下counttotalelement函式,其他跟sample3_1.htm一樣:

function counttotalelement(node)

var childrens = node.childnodes;         //獲取node的全部子節點

for(var m=node.firstchild; m!=null;m=m.nextsibling)

return total;

}

b、搜尋文件中特定的元素

在使用dom的過程中,有時候需要定位到文件中的某個特定節點,或者具有特定型別的節點列表。這種情況下,可以呼叫document物件的getelementsbytagname()和getelementbyid()方法來實現。

document.getelementsbytagname()返回文件中具有指定標記名的全部element節點陣列(也是nodelist型別)。element出現在陣列中的順序就是他們在文件中出現的順序。傳遞給getelementsbytagname()的引數忽略大小寫。比如,想定位到第乙個標記,可以這樣寫:document.getelementsbytagname(「table」)[0]。例外的,可以使用document.body定位到標記,因為它是唯一的。

getelementsbytagname()返回的陣列取決於文件。一旦文件改變,返回結果也立即改變。相比,getelementbyid()則比較靈活,可以隨時定位到目標,只是要實現給目標元素乙個唯一的id屬性值。這個我們在《ajax開發簡略》的「級聯選單」例子中已經使用過了。

element物件也支援getelementsbytagname()和getelementbyid()。不同的是,搜尋領域只針對呼叫者的子節點。

c、修改文件內容

遍歷整棵文件樹、搜尋特定的節點,我們最終目的之一是要修改文件內容。接下來的三個例子將使用node的幾個常用方法,來演示如何修改文件內容。

例子3 -- sample4_1.htm:

第一行

第二行第三行

onclick="reversenode(document.body)">

例子4-- sample4_2.htm:

例子1通過直接操作body的子節點來修改文件。在html文件中,布局和定位常常通過**來實現。因此,例子4將演示操作**內容,將**的四個單元行順序顛倒。如果沒有使用標籤,則把全部的當做是屬於乙個子節點,所以我們採用陣列快取的方式,把行資料顛倒一下。這個例子同時也演示了如何使用dom建立**單元行。

第一行

第二行

第三行

第四行

AJAX開發簡略續一 2

element常用的方法 方法 描述 getattribute 以字串形式返回指定屬性的值。getattributenode 以attr節點的形式返回指定屬性的值。getelementsbytabname 返回乙個node陣列,包含具有指定標記名的所有element節點的子孫節點,其順序為在文件中出...

AJAX開發簡略續一 5

e 使用dom 操作xml 文件在資料表示方面,xml文件更加結構化。dom在支援 html 的基礎上提供了一系列的 api,支援針對 xml的訪問和操作。利用這些 api,我們可以從 xml中提取資訊,動態的建立這些資訊的 html 呈現文件。處理 xml文件,通常遵循 載入 xml文件 提取資訊...

AJAX開發簡略(3) 打雜的 新浪部落格

首先,它要檢查xmlhttprequest物件的readystate值,判斷請求目前的狀態。參照前文的屬性表可以知道,readystate值為4的時候,代表伺服器已經傳回所有的資訊,可以開始處理資訊並更新頁面內容了。如下 伺服器返回資訊後,還需要判斷返回的http狀態碼,確定返回的頁面沒有錯誤。所有...