DOM遍歷
基于ID、元素類型、類名查找元素非常有用,但是如果你想基于它在DOM樹中的位置來查找元素該怎么辦?換句話說,你有一個(gè)給定的元素,你想查找它的父元素、子元素中的一個(gè)、它的上一個(gè)或下一個(gè)節(jié)點(diǎn)兄弟節(jié)點(diǎn)。例如,采用下面這段零碎的HTML代碼:
清單1:HTML碎片(一個(gè)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使用縮進(jìn)來說明其中每個(gè)元素節(jié)點(diǎn)在DOM樹中的位置。在這個(gè)實(shí)例中,table元素是根元素,有兩個(gè)子節(jié)點(diǎn)thead和tbody。thead元素有一個(gè)tr子節(jié)點(diǎn),tr有三個(gè)孩子--所有的th元素。tbody元素有兩個(gè)tr子節(jié)點(diǎn),每個(gè)tr節(jié)點(diǎn)有三個(gè)孩子。在上述每一行的第三個(gè)節(jié)點(diǎn)中進(jìn)一步包含子節(jié)點(diǎn),都是兩個(gè)鏈接標(biāo)記。
正如你知道的那樣,你可以使用一個(gè)JavaScript框架的選擇函數(shù)通過ID很輕松的選擇一個(gè)元素。在這個(gè)實(shí)例中,有兩個(gè)元素?fù)碛蠭D,它們是ID分別為row-001和row-002的tr元素。使用Prototype庫選擇第一個(gè)tr,可以使用下面的代碼:
var theRow = $('row-001');
在上一章,你還了解到,基于元素的類型或class使用選擇器來獲取元素。在這個(gè)實(shí)例中,你可以使用下面的語法來得到所有的td元素。
var allCells = $$('td');
改代碼的主要問題在于它返回了每一個(gè)td 元素。但是,如果你只想得到ID為row-001的tr的所有td元素該怎么辦?這正是DOM遍歷函數(shù)發(fā)揮作用的地方。首先,讓我們使用原型來選擇ID為row-001的tr的所有的子級(jí)。
var firstRowCells = theRow.childElements();
這將返回theRow變量(你最初設(shè)置的ID為row-001的tr)所有子元素的數(shù)組。
接下來,我們假設(shè)你只想得到該行的第一個(gè)子元素。在本例中,即包含“Joe Lennon”文本的td元素。要做到這一點(diǎn),使用下面的語句:
var firstRowFirstCell = theRow.down();
真簡(jiǎn)單!這個(gè)特定的使用方法等價(jià)于:
var firstRowFirstCell = theRow.childElements()[0];
也可以這樣表示:
var firstRowFirstCell = theRow.down(0);
JavaScript的索引從零開始,所以上面的語句主要告知JavaScript來選擇第一個(gè)子元素。要選擇第二個(gè)子元素(單元格包含電子郵件地址joe@joelennon.ie),你可以這樣用:
var firstRowSecondCell = theRow.down(1);
或者,你可以在兄弟節(jié)點(diǎn)之間瀏覽DOM。本例中,第二個(gè)單元格是第一個(gè)單元格的下一個(gè)兄弟節(jié)點(diǎn)。因此,你可以使用下面的語句:
var firstRowSecondCell = firstRowFirstCell.next();
與down()函數(shù)工作一樣,選擇第三個(gè)單元格可以這樣使用。
var firstRowThirdCell = firstRowFirstCell.next(1);
除了使用索引來查找特定節(jié)點(diǎn)外,Prototype庫還可以使用CSS選擇器語法。在清單1中,我們要找到第二個(gè)包含 Jill Mac Sweeney’ 詳細(xì)信息的鏈接(“刪除”鏈接)。
var secondRowSecondLink = $('row-002').down('a', 1);
在本例中,使用$函數(shù)來查找ID為row-002的那一行,向下遍歷到第二個(gè)后代a元素(錨點(diǎn))。
一些框架還允許“菊花鏈?zhǔn)?rdquo;的遍歷功能,這意味著你可以彼此連接遍歷命令。上面的例子中,Prototype庫的另一種表達(dá)方式是這樣的:
var secondRowSecondLink = $('row-002').down('a').next();
看看下面的例子:
var domTraversal = $('row-001').down().up().next().previous();
正如你所見,菊花鏈允許你連接多個(gè)DOM遍歷語句。事實(shí)上,上述例子實(shí)際上最終選擇ID為row-001的tr元素,所以菊花鏈又回到了開始的地方。