AJAX and PHP: Building Responsive Web Applications
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Even More DOM

In the previous exercise, you have created the list of elements by joining strings to compose a simple HTML structure. The same HTML structure can be built programmatically using the DOM. In the next exercise, you will generate this content programmatically:

<div id=”myDivElement”>
  Hello Dude! Here’s a cool list of colors for you:
  <br/>
  <ul>
    <li>Black</li>
    <li>Orange</li>
    <li>Pink</li>
  </ul>
</div>

A DOM document is a hierarchical structure of elements, where each element can have one or more attributes. In this HTML fragment, the single element with an attribute is <div>, which has an attribute called id with the value myDivElement. The root node that you can access through the document object is <body>. When implementing the above HTML document, you will end up with a structure such as the one in the figure below:

Figure 2.3: A Hierarchy of HTML Elements

In Figure 2.3, you see an HTML structure formed of <body>, <div>, <br>, <ul>, and <li> elements, and four text nodes (“Hello…”, “Black”, “Orange”, “Pink”). In the next exercise, you will create this structure using the DOM functions createElement, createTextNode, and appendChild.

Time for Action—Even More DOM

  1. In the foundations folder, create a subfolder called evenmorejsdom.
  2. In the evenmorejsdom folder, create a file called evenmorejsdom.html, and add the following code to it: 
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html>
  <head>
    <title>AJAX Foundations: Even More JavaScript and DOM</title>
    <script type=”text/javascript” src=”evenmorejsdom.js”></script>
  </head>
  <body onload=”process()”>
    <div id=”myDivElement” />
  </body>
</html>
  3. Add a new file called evenmorejsdom.js, with the following contents: 
    function process()
{
  // create the first text node
  oHello = document.createTextNode
                    (“Hello Dude! Here’s a cool list of colors for you:”);

  // create the <ul> element
  oUl = document.createElement(“ul”)

  // create the first <ui> element and add a text node to it
  oLiBlack = document.createElement(“li”);
  oBlack = document.createTextNode(  oLiBlack.appendChild(oBlack);

  // create the second <ui> element and add a text node to it
  oLiOrange = document.createElement(“li”);
  oOrange = document.createTextNode(“Orange”);
  oLiOrange.appendChild(oOrange);

  // create the third <ui> element and add a text node to it
  oLiPink = document.createElement(“li”);
  oPink = document.createTextNode(“Pink”);
  oLiPink.appendChild(oPink);

  // add the <ui> elements as children to the <ul> element
  oUl.appendChild(oLiBlack);
  oUl.appendChild(oLiOrange);
  oUl.appendChild(oLiPink);

  // obtain a reference to the <div> element on the page
  myDiv = document.getElementById(“myDivElement”);

  // add content to the <div> element
  myDiv.appendChild(oHello);
  myDiv.appendChild(oUl);
}
  4. Load evenmoredom.html in a web browser. The result should look like Figure 2.4:

    Figure 2.4: Even More JavaScript and DOM

What Just Happened?

Well, what just happened is exactly what happened after the previous exercise, but this time with much more code, as you can see by having a look at the process() function. Although there are many lines of code, the functionality is pretty simple. This suggests clearly enough that using the DOM to create HTML structures may not always be the best option. However, in certain circumstances it can actually make programming easier, for the following reasons:

  • It’s fairly easy to programmatically create dynamic HTML structures, such as building elements in for loops, because you’re not concerned about text formatting but about building the structural elements.
  • As a consequence, you don’t need, for example, to manually add closing tags. When you add a ‘ui’ element, the DOM will take care to generate the <ui> tag and an associated closing </ui> tag for you.
  • You can treat the nodes as if they were independent nodes, and decide later how to build the hierarchy. Again, the DOM takes care of the implementation details; you just need to tell it what you want.
上一章目录下一章