JavaScript架構的選擇函數:DOM遍曆

來源:互聯網
上載者:User

DOM遍曆

基於ID、元素類型、類名尋找元素非常有用,但是如果你想基於它在DOM樹中的位置來尋找元素該怎麼辦?換句話說,你有一個給定的元素,你想尋找它的父元素、子項目中的一個、它的上一個或下一個節點兄弟節點。例如,採用下面這段零碎的HTML代碼:

清單1:HTML片段(一個table)

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row-001">
            <td>Joe Lennon</td>
            <td>joe@joelennon.ie</td>
            <td><a href="#">Edit</a> 
                <a href="#">Delete</a></td>
        </tr>
        <tr id="row-002">
            <td>Jill Mac Sweeney</td>
            <td>jill@example.com</td>
            <td><a href="#">Edit</a> 
                <a href="#">Delete</a></td>
        </tr>
    </tbody>
</table>

清單1使用縮排來說明其中每個元素節點在DOM樹中的位置。在這個執行個體中,table元素是根項目,有兩個子節點thead和tbody。thead元素有一個tr子節點,tr有三個孩子--所有的th元素。tbody元素有兩個tr子節點,每個tr節點有三個孩子。在上述每一行的第三個節點中進一步包含子節點,都是兩個連結標記。

正如你知道的那樣,你可以使用一個JavaScript架構的選擇函數通過ID很輕鬆的選擇一個元素。在這個執行個體中,有兩個元素擁有ID,它們是ID分別為row-001和row-002的tr元素。使用Prototype庫選擇第一個tr,可以使用下面的代碼:

var theRow = $('row-001');

在上一章,你還瞭解到,基於元素的類型或class使用選取器來擷取元素。在這個執行個體中,你可以使用下面的文法來得到所有的td元素。

var allCells = $$('td');

改代碼的主要問題在於它返回了每一個td 元素。但是,如果你只想得到ID為row-001的tr的所有td元素該怎麼辦?這正是DOM遍曆函數發揮作用的地方。首先,讓我們使用原型來選擇ID為row-001的tr的所有的子級。

var firstRowCells = theRow.childElements();

這將返回theRow變數(你最初設定的ID為row-001的tr)所有子項目的數組。

接下來,我們假設你只想得到該行的第一個子項目。在本例中,即包含“Joe Lennon”文本的td元素。要做到這一點,使用下面的語句:

var firstRowFirstCell = theRow.down();

真簡單!這個特定的使用方法等價於:

var firstRowFirstCell = theRow.childElements()[0];

也可以這樣表示:

var firstRowFirstCell = theRow.down(0);

JavaScript的索引從零開始,所以上面的語句主要告知JavaScript來選擇第一個子項目。要選擇第二個子項目(儲存格包含電子郵件地址joe@joelennon.ie),你可以這樣用:

var firstRowSecondCell = theRow.down(1);

或者,你可以在兄弟節點之間瀏覽DOM。本例中,第二個儲存格是第一個儲存格的下一個兄弟節點。因此,你可以使用下面的語句:

var firstRowSecondCell = firstRowFirstCell.next();

與down()函數工作一樣,選擇第三個儲存格可以這樣使用。

var firstRowThirdCell = firstRowFirstCell.next(1);

除了使用索引來尋找特定節點外,Prototype庫還可以使用CSS選取器文法。在清單1中,我們要找到第二個包含 Jill Mac Sweeney’ 詳細資料的連結(“刪除”連結)。

var secondRowSecondLink = $('row-002').down('a', 1);

在本例中,使用$函數來尋找ID為row-002的那一行,向下遍曆到第二個後代a元素(錨點)。

一些架構還允許“菊花鏈式”的遍曆功能,這意味著你可以彼此串連遍曆命令。上面的例子中,Prototype庫的另一種表達方式是這樣的:

var secondRowSecondLink = $('row-002').down('a').next();

看看下面的例子:

var domTraversal = $('row-001').down().up().next().previous();

正如你所見,菊花鏈允許你串連多個DOM遍曆語句。事實上,上述例子實際上最終選擇ID為row-001的tr元素,所以菊花鏈又回到了開始的地方。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。