tailieunhanh - DHTML Utopia Modern Web Design Using JavaScript & DOM- P3

DHTML Utopia Modern Web Design Using JavaScript & DOM- P3:In a single decade, the Web has evolved from a simple method of delivering technical documents to an essential part of daily life, making and breaking relationships and fortunes along the way. “Looking something up on the Internet,” by which is almost always meant the Web, is now within reach of almost anyone living in a first-world country, and the idea of conducting conversations and business (and probably orchestras) in your Web browser is no longer foreign, but part of life | Chapter 2 The Document Object Model Note that Element is plural in this method s name but singular for getElementById. This is a reminder that the former returns an array of elements while the latter returns only a single element. Walking from Parents to Children Each node has one parent except the root element and may have multiple children. You can obtain a reference to a node s parent from its parentNode property a node s children are found in the node s childNodes property which is an array. The childNodes array may contain nothing if the node has no children such nodes are called leaf nodes . Suppose the variable node points to the ul element of the DOM tree. We can get the node s parent the div element like this parent We can check if the unordered list has any list items children by looking at the length property of the childNodes array if 0 alert no list items found If there are any children their numbering starts at zero. We can obtain the second child in our example HTML an li element as follows list_item 1 For the special case of the first child located here list_item 0 we can also use this shorthand child Similarly the last child in this case the second li has its own special property child We ll see all these properties used routinely through the rest of this book. 20 Licensed to siowchen@ What to do with Elements What to do with Elements Now you know how to get references to elements the nodes in your HTML page. The core of DHTML the D-for-dynamic bit lies in our ability to change those elements to remove them and to add new ones. Throughout the rest of this chapter we ll work with the following code snippet which we saw earlier div id codesection p id codepara p ul li a href http id splink SitePoint a li li a href http id yalink Yahoo a li ul div Changing Element Attributes Every property of an element and .