Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Objects

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

DOM Collections

Included in the Document Object Model is the notion of collections, which are groups of related objects on a page.

DOM Collections

 

Included in the Document Object Model is the notion of collections, which are groups of related objects on a page. DOM collections are accessed as properties of DOM objects such as the document object or a DOM node. The document object has properties con-taining the images collection, links collection, forms collection and anchors collection.

 

These collections contain all the elements of the corresponding type on the page. Figure 12.3 gives an example that uses the links collection to extract all of the links on a page and display them together at the bottom of the page.

 

    <?xml version = "1.0" encoding = "utf-8"?>

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

    <!-- Fig. 12.3: collections.html -->

 

    <!-- Using the links collection. -->

 

    <html xmlns = "http://www.w3.org/1999/xhtml">

 

    <head>

 

    <title>Using Links Collection</title>

 

<style type = "text/css">

body  { font-family: arial, helvetica, sans-serif }

h1    { font-family: tahoma, geneva, sans-serif;

      text-align: center }

p     { margin: 5% }

p a   { color: #aa0000 }

.links { font-size: 14px;

      text-align: justify;

      margin-left: 10%;

      margin-right: 10% }

      .link a{ text-decoration: none }

 

      .link a:hover { text-decoration: underline }

 

      </style>

 

      <script type = "text/javascript">

      <!--

 

      function processlinks()

{

var linkslist = document.links; // get the document's links

var contents = "Links in this page:\n<br />| ";

           

// concatenate each link to contents

for ( var i = 0; i <  linkslist.length;  i++ )

{          

var currentLink = linkslist[ i ];

contents += "<span class = 'link'>" +

      currentLink.innerHTML.link( currentLink.href ) +

"</span> | ";

} // end for

     

        document.getElementById( "links" ).innerHTML = contents;

 

        } // end function processlinks

        // -->

 

        </script>

 

        </head>

 

        <body onload = "processlinks()">

 

        <h1>Deitel Resource Centers</h1>

 

        <p><a href = "http://www.deitel.com/">Deitel's website</a> contains

 

        a rapidly growing

 

        <a href = "http://www.deitel.com/ResourceCenters.html">list of

 

        Resource Centers</a> on a wide range of topics. Many Resource

 

        centers related to topics covered in this book,

 

        <a href = "http://www.deitel.com/iw3htp4">Internet and World Wide

 

        Web How to Program, 4th Edition</a>. We have Resouce Centers on

 

        <a href = "http://www.deitel.com/Web2.0">Web 2.0</a>,

 

        <a href = "http://www.deitel.com/Firefox">Firefox</a> and

 

        <a href = "http://www.deitel.com/IE7">Internet Explorer 7</a>,

 

        <a href = "http://www.deitel.com/XHTML">XHTML</a>, and

 

        <a href = "http://www.deitel.com/JavaScript">JavaScript</a>.

 

        Watch the list of Deitel Resource Centers for related new

 

        Resource Centers.</p>

 

        <div id = "links" class = "links"></div>

 

        </body>

 

</html>


The XHTML body contains a paragraph (lines 46–59) with links at various places in the text and an empty div (line 60) with id links. The body’s onload attribute specifies that the processlinks method is called when the body finishes loading.

 

Method processlinks declares variable linkslist (line 27) to store the document’s links collection, which is accessed as the links property of the document object. Line 28 creates the string (contents) that will contain all the document’s links, to be inserted into the links div later. Line 31 begins a for statement to iterate through each link. To find the number of elements in the collection, we use the collection’s length property.

 

Line 33 inside the for statement creates a variable (currentlink) that stores the cur-rent link. Note that we can access the collection stored in linkslist using indices in square brackets, just as we did with arrays. DOM collections are stored in objects which have only one property and two methods—the length property, the item method and the namedItem method. The item method—an alternative to the square bracketed indices— can be used to access specific elements in a collection by taking an index as an argument. The namedItem method takes a name as a parameter and finds the element in the collec-tion, if any, whose id attribute or name attribute matches it.

 

Lines 34–36 add a span element to the contents string containing the current link. Recall that the link method of a string object returns the string as a link to the URL passed to the method. Line 35 uses the link method to create an a (anchor) element containing the proper text and href attribute.

 

Notice that variable currentLink (a DOM node representing an a element) has a spe-cialized href property to refer to the link’s href attribute. Many types of XHTML ele-ments are represented by special types of nodes that extend the functionality of a basic DOM node. Line 39 inserts the contents into the empty div with id "links" (line 60) in order to show all the links on the page in one location.

 

Collections allow easy access to all elements of a single type in a page. This is useful for gathering elements into one place and for applying changes across an entire page. For example, the forms collection could be used to disable all form inputs after a submit button has been pressed to avoid multiple submissions while the next page loads. The next section discusses how to dynamically modify CSS styles using JavaScript and DOM nodes.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.