Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 12 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
12
Dung lượng
1,14 MB
Nội dung
ptg 618 Chapter 15 • The W3C DOM and JavaScript 15.4 Walking with the DOM In Example 15.1, we will take a walk down the DOM tree, one step at a time, using the parent/child/sibling nodes to represent each element in the document. The simple lay- out of the HTML page is drawn in Figure 15.6. You can quickly see that using DOM properties to navigate the tree can get confusing, and if in any way the structure of the document changes, then all the nodes properties will have to be reset. We discuss a quicker more efficient way to get around in the next section. Because every element in the tree has a parent (other than the root node), a relation- ship can be established going up or down the tree as long as you know which node and which children will lead you to the target element you want. The five properties for each node in the tree are parentNode, firstChild, lastChild, previousSibling, and next Sibling. Figure 15.6 The DOM tree for Example 15.1. EXAMPLE 15.1 1 <html> <head><title>The Nodes</title> <style> p{font-size: x-large; color:darkblue; font-style:bold; } </style> </head> <body> <h1>Walking with Nodes</h1> <p>Who knows what node?</p> <p> document <html> root node <head> <title> <h1> “The Nodes” <body> “Walking with the Nodes” From the Library of WoweBook.Com ptg 15.4 Walking with the DOM 619 <script type="text/javascript"> 2 var Parent=document.childNodes[0]; // First child node is HTML 3 var Child=Parent.childNodes[0]; // Parent’s first child is HEAD document.write("The parent node is: "); 4 document.write(Parent.nodeName+"<br />"); // Get the name parent node document.write("The first child of the parent node is: "); 5 document.write(Child.nodeName+"<br />"); document.write("The node below the child is: "); 6 document.write(Child.childNodes[0].nodeName+"<br />"); document.write("The text node below title is: "); 7 document.write(Child.childNodes[0].childNodes[0].nodeName + "<br />"); document.write("The value of the text node is: " + 8 Child.childNodes[0].childNodes[0].nodeValue+"<br />"); document.write("The first child of the parent is: "); 9 document.write(Parent.firstChild.nodeName+"<br />"); document.write("The last child of the parent is: "); 10 document.write(Parent.lastChild.nodeName+"<br />"); document.write("The node below the body is: "); 11 document.write(Parent.lastChild.childNodes[0].nodeName+ "<br />"); document.write("The next sibling of the h1 element is: "); 12 document.write(Parent.lastChild.childNodes[0].nextSibling.nodeName+ "<br />"); document.write("It's value is " + "Parent.lastChild.childNodes[0].nextSibling.nodeValue); 13 document.write("<br />The last child's type is: "); document.write(Parent.lastChild.nodeType); </script> </p> </body> </html> EXPLANATION 1 The JavaScript program will access the HTML elements through the DOM where each element is viewed as a node. This line cannot be broken for format- ting due to the whitespace bug. If you break up this line, the whitespace created will be considered a text node, and the rest of the script will not display the nodes as expected. Continues EXAMPLE 15.1 (CONTINUED) From the Library of WoweBook.Com ptg 620 Chapter 15 • The W3C DOM and JavaScript 2 The first node, childNodes[0], is the first node in the HTML hierarchy, the parent node. This node is assigned to a variable, Parent. The only reason to create the variable is to cut down on the amount of typing and propensity for errors when we go further down the document tree. Note: Watch your spelling when working with the DOM in JavaScript. 3 The parent node’s first child is document.childNodes[0].childNodes[0]. This por- tion of the tree is assigned to the variable Child. 4 The name of a node is found in the nodeName property. The parent node is HTML, the highest element in the HTML hierarchy. 5 The nodeName of the first child of the parent node is HEAD. 6 The next node in the hierarchy is the child of the HEAD element. It is the title element: <html> <head> <title> 7 Continuing the walk down the DOM tree, we come to the text node. It contains the text between the <title> </title> tags. The name of the text node is preceded by a # mark. 8 The actual text between the <title></title> tags is found in the nodeValue property of the node. 9 Using the firstChild property to simplify things, the first child of the parent again shows to be the HEAD element. 10 The last child of the HTML parent is the BODY element: <html> <head> <body> 11 The node directly below the body is the h1 element: <body><h1>Walking with the Nodes</h2> 12 The node below the body (i.e., the last child of the body element), document.child- Nodes[0].lastChild.nodeName, is the h1 element. 13 The parent’s last child node’s type is 1. An element node type is type 1, an attribute type is type 2, and a text node is type 3. See Figure 15.7. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 15.5 DOM Inspectors 621 15.5 DOM Inspectors A DOM inspector is a browser tool that lets you dynamically traverse the DOM tree and check CSS styles, in a two-paned window as shown in Figure 15.8. Now you can view the markup in your Web page and all the nodes and their types for those parts of the page that are of interest to you. For Firefox: see https://developer.mozilla.org/en/dom_inspector. For Internet Explorer see: http://www.ieinspector.com/dominspector/. For Opera go to the menu: Tools→Advanced→Developer Tools. Figure 15.7 The node properties. From the Library of WoweBook.Com ptg 622 Chapter 15 • The W3C DOM and JavaScript 15.6 Methods to Shorten the DOM Walk In the previous example, walking with the nodes was like walking through a maze in a palace garden. Although the DOM is represented as a hierarchal tree of elements, where each element is represented as a node, walking with the nodes can be daunting, so the W3C provides additional methods and properties to help make the walk easier. The DOM provides two methods, getElementById() and getElementsByTag(), to directly access the target element you are trying to reach. It also provides properties to represent attributes of an element listed in Table 15.5. 15.6.1 The document.getElementById() Method Using the id attribute is not a new idea. We have been using it throughout this text. All browsers that comply with the W3C’s DOM1+ should implement the id attribute for accessing the elements in a document. It uniquely identifies any HTML element in a Web document. Note: This is not the same as the name attribute discussed in Chapters 11 and 12. If you recall, the name attribute is used with forms, images, links, and anchors. The name attribute does not have to be unique and is used by the browser to create name/value pairs to be submitted to a server program as part of the URL (GET method) or HTTP header (POST). The HTML element’s id attribute must be assigned a unique value that is used as a CSS selector to identify a style rule or to get a reference to that element in a JavaScript Figure 15.8 The Firefox DOM Inspector. From the Library of WoweBook.Com ptg 15.6 Methods to Shorten the DOM Walk 623 program. In Chapter 11 when working with forms, we used both the name and id attri- butes. When working with DOM nodes, the id attribute allows you to specify a specific node and retrieve a reference to it with the document.getElementByID() method, a DOM1 method. Although all major browsers are DOM1 compliant, here is a little test code you can run to check your browser: if (document.getElementById){ alert("DOM compliant!"); } Go to http://www.webreference.com/tools/browser/JavaScript.html to see examples of “browser sniffer” programs—programs that can tell what browser is being used. All that node stuff can be really tricky, but by combining the HTML id attribute with the getElementById() method of the document object, it is much easier to get a handle on any HTML object. The getElementById() method takes the id of an HTML element as its argument and returns a reference to that element. (Remember that getElementById() is a method of the document object and must be written as document.getElementById()). With the reference you can manipulate the element in your JavaScript code. Suppose you have a paragraph tag defined with an id attribute, as: <p id="para1">This is the paragraph.</p> Now in JavaScript you can get a reference to the p element with the getElementById() method as follows: p_element = document.getElementById("para1"); Rather than descending the entire DOM tree, p_element is a reference to the p element identified as “para1” and can be used with the DOM properties: alert(p_element.nodeName); // Name of the element alert(p_element.childNodes[0].nodeValue); // Text between tags Example 15.2 demonstrates the use of the id attribute on several HTML elements. After getting a reference to the element, the DOM node properties can be applied to the reference. EXAMPLE 15.2 <html> <head><title>The Dom and Id's</title></head> 1 <body id="body1"> 2 <h1 id="head1">Shortening the DOM Walk</h1> 3 <p id="para1">This is the paragraph!<p/> <p><big> Continues From the Library of WoweBook.Com ptg 624 Chapter 15 • The W3C DOM and JavaScript <script name="text/javascript"> 4 var h1tag=document.getElementById("head1"); 5 var bodytag=document.getElementById("body1"); 6 var paratag = document.getElementById("para1"); 7 h1tag.style.fontFamily="verdana"; h1tag.style.fontSize="32"; h1tag.style.color="darkgreen"; paratag.style.fontSize="125%"; paratag.style.color="blue"; bodytag.style.backgroundColor="silver"; 8 document.write(h1tag +"<br />"); document.write(paratag+"<br />"); document.write(bodytag+"<br /><br />"); //Let's get the text between the tags document.write("<h2>This is the text within the tags:</h2>"); 9 document.write(h1tag.childNodes[0].nodeValue+"<br />"); document.write(paratag.childNodes[0].nodeValue+"<br />"); </script> </big> </p> </body > </html> EXPLANATION 1 The <body> tag is given an id called “body1”. 2 The <h1> tag is given an id called “head1”. 3 The <p> tag is given an id called “para1”. 4 In the JavaScript program, the getElementById() method returns a reference to an h1 element, and assigns that value to the variable called h1tag. 5 The getElementById() method returns a reference to a BODY element, and assigns that value to the variable called bodytag. 6 The getElementById() method returns a reference to a p element, and assigns that value to the variable called paratag. 7 Now, by using the style property, the elements are assigned new values for font size and color, causing them to change dynamically. 8 The value returned by the getElementById() method is displayed for each of the elements. As shown in the output, each one of these HTML elements is an object. See Figure 15.9. EXAMPLE 15.2 (CONTINUED) From the Library of WoweBook.Com ptg 15.6 Methods to Shorten the DOM Walk 625 15.6.2 The document.getElementsByTagName() Method To reference a collection of elements in a document, such all the <p> tags, <h1> tags, or <a> tags in your document, you can use the getElementsByTagName() method. This method takes the name of the element as its argument and returns a list of all the nodes of that name in the document. If you need to collectively change the values of a partic- ular element, such as all the links in an <a> tag, do this by manipulating the reference returned by the getElementsByTagName(). Use the DOM nodes to continue walking down the tree from the point of reference retrieved from document.getElementsByTag- Name() method as shown in Example 15.3. 9 Rather than starting at the top of the DOM tree to obtain the text between the HTML tags, it is easier to get a reference to the tag and then add the DOM prop- erties to the reference as shown here. An even easier way to fetch the text value between the tags is to use the innerHTML property described later in this chapter. Figure 15.9 HTML elements are objects. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 626 Chapter 15 • The W3C DOM and JavaScript EXAMPLE 15.3 <html> <head><title>Working with Tags</title> <style type="text/css"> body {background-color:aliceblue;color:green; font-size:larger;} h1{color:darkblue; } </style> </head> <body> 1 <h1> First</h1> <h1> Second</h1> <h1> Third</h1> 2 <script type="text/javascript"> 3 var heading1=document.getElementsByTagName("h1"); document.write(heading1 + "<br />"); document.write("There are "+ 4 heading1.length+ " H1 tags.<br />"); 5 for(i=0; i< heading1.length; i++){ 6 document.write( heading1[i].nodeName+": <em>"+ 7 heading1[i].childNodes[0].nodeValue+"</em><br />"); } </script> </body> </html> EXPLANATION 1 Three <h1> tags are used in this document. 2 Because of the top-down processing by the HTML renderer, be sure to put the JavaScript program at the end of the document. This way, the tags will already have been identified before they are put into the HTML collection returned by the getElementsByName() method. 3 The HTML collection of h1 tags is stored as an array of nodes in the variable, heading1. 4 The length of the array is 3 in this example because there are three H1 elements in the document. See Figure 15.10. 5 The for loop will iterate through each of the heading1 tag objects in the HTML col- lection. 6 The nodeName property contains the name of the HTML element. 7 The child of the h1 element, childNodes[i], (where i is the index value) is the text between the <h1> tags. The nodeValue property contains the actual text. From the Library of WoweBook.Com ptg 15.6 Methods to Shorten the DOM Walk 627 15.6.3 JavaScript Properties to Represent HTML Attributes The attributes of an HTML element are accessible as properties in JavaScript. Table 15.5 lists the properties available to JavaScript to test an attribute. Figure 15.10 Getting elements by tag name: Mozilla Firefox (left), Internet Explorer (right). Table 15.5 Properties to Represent HTML Attributes Property Description Example className Represents the class of a CSS element div2.className="blue"; div2 refers to an HTML element. It is being assigned the CSS class called blue (see Example 15.17) dir Specifies the text direction for a document; for example, read left to right (English), or right to left (Hebrew); ltr (left to right) or rtl (right to left) element.dir="ltr"; id Value of the unique id of the current element (see Section 15.6.1) lang Specifies the language in which the text of the document is written; for example, en for English, ja for Japanese, and sp for Spanish if(document.lang=="ja") Continues From the Library of WoweBook.Com [...]... the DOM Table 15.6 lists the DOM methods For a complete list of DOM methods and an excellent resource, go to the JavaScript Kit page at http://www.JavaScriptkit.com/domref/elementmethods.shtml For another great resource on how to modify the DOM, go to http://www.howtocreate.co.uk/tutorials /JavaScript/ dombasics From the Library of WoweBook.Com ... the first paragraph and returns a reference to it The first paragraph has a dir and style attribute Using dir and style.fontSize, JavaScript can get access to these attributes The second paragraph has also been assigned attributes Using the dir and className properties, JavaScript can find the direction of the text, right to left, and the name of the class that is used to style this paragraph The className... Properties color { color:darkblue; background:aqua;} This is an English style This is Hebrew style p1=document.getElementById('paraid1'); document.write("The text direction...628 Chapter 15 • The W3C DOM and JavaScript Table 15.5 Properties to Represent HTML Attributes (continued) Property Description Example style Value of the CSS inline style attribute (CSS2) div.style.color="green"; (see Section 14.5.2... this paragraph The className property can also be assigned the name of a different class to change the style of the object The output is shown in Figure 15.11 Figure 15.11 Displaying HTML attributes with JavaScript properties 15.7 Modifying the DOM (Appending, Copying, and Removing Nodes) You can create new nodes, make a clone of an existing node, insert a new node before an existing node, remove a node,... EXPLANATION 1 2 A CSS style contains a class called color to be used by elements within the HTML page The p element is assigned a number of attributes: id, dir, class, and style, all available in a JavaScript program to either change or display values From the Library of WoweBook.Com 15.7 Modifying the DOM (Appending, Copying, and Removing Nodes) 629 E X P L A N A T I O N ( C O N T I N U E D) 3 4 . 627 15.6.3 JavaScript Properties to Represent HTML Attributes The attributes of an HTML element are accessible as properties in JavaScript. Table 15.5 lists the properties available to JavaScript. paragraph!<p/> <p><big> Continues From the Library of WoweBook.Com ptg 624 Chapter 15 • The W3C DOM and JavaScript <script name="text /javascript& quot;> 4 var h1tag=document.getElementById("head1"); 5. the element in your JavaScript code. Suppose you have a paragraph tag defined with an id attribute, as: <p id="para1">This is the paragraph.</p> Now in JavaScript you can