Cho một phần tử dạng cây, bạn có thể dễ dàng nhận được các phần tử con của nó: var firstChild = ; var lastChild = ; var allChildren = ; | 312 Part VI Creating Extensions and Themes td John td td Doe td tr table br button type button onclick test Test button body html Given a tree element you can easily get its child elements var firstChild var lastchild var allChildren After retrieving the wanted element you can in turn get its children and so on. This allows you to navigate your way through the tree structure. Modifying the Document Tree Structure Let s use the DOM methods to dynamically insert an additional row of data in our table. First we need to create the new row var newRow tr Now create two new table cells td elements var firstName td var lastName td We can now fill the new table cells with data Jane Smith Let s add the new cells to the new row firstName lastName Finally add the new row to our table newRow Figure 16-6 shows the updated table. Figure 16-6 The table with the dynamically inserted row Chapter 16 Understanding Mozilla Programming 313 The updated document tree is shown in Figure 16-7. Figure 16-7 The document tree after a new row is dynamically inserted The table example was intentionally simplified to keep things clear. The actual DOM structure might include a few elements that are added by the browser. You can examine the complete DOM structure and see if the preceding examples need any adjustments I ll leave that exercise to you. If your HTML or XUL document is displayed on-screen you do not have to instruct the browser to update its view after you modify the document tree. The browser determines automatically whether the update is needed and performs all the necessary redraws. Changing Element s Attributes For a final DOM example let s change the border attribute of our table making it four times wider border 4 I Note I We have .
