Modelling the Document Objects, Page 2

More DOM

 Most web browsers have added extra objects, methods and properties to cover features that the existing DOM does not address or to be more efficient than the current way. Some of these are now being made official in DOM 5 HTML.

One of the most popular is the innerHTML property. This was originally invented by Microsoft and other browser vendors added support for it as compatibility for IE only websites. But they found it quite useful in its own right and is an unofficial standard.

innerHTML is a property that you can retrieve the contents of the element or assign new content (replacing the old).

// Capture the div element
divEL = document.getElementById(“me”);

// Assign content
divEL.innerHTML = "<p class=\"highBlue\" title=\"DOM Level 5 HTML\">Modelling the document objects</p>";

// Get content
currentContents = divEL.innerHTML;

// Forgot to add extra sentence so need to add to current contents
divEL.innerHTML = currentContents + " <p class=\"fancyStyling\">Adding an extra sentance</p>";

Plus more web browsers have support for the outerHTML property which will replace not only the contents but the current element object itself such as:

// Obtain 3rd paragraph (<p id="info">Accessible versions of a video.</p>)
collection = document.getElementsByTagName('p');
theInfo = collection.item(2);

// Replace with an unordered list
theInfo.outerHTML = '<ul id="info"><li>Captions,</li><li>Audio Description</li><li>Extended Audio Description</li><li>Sign Language Video</li></ul>';

Scripted Images with Canvas

Canvas provides a way to melodramatically create images using the canvas element and its canvas scripting API (application programming interface).

<canvas id="interimage1" width="300" height="300">
  <span>A red box.</span>
</canvas>
<script type="text/javascript" src="scripts/drawit.js"></script>

In drawit.js:

canv = document.getElementById("interimage1");
if (canv.getContext) {
  // Get 2d context for the image
  image2d = canv.getContext("2d");
  // Set color to red
  image2d.fillStyle = "#ff0000";
  // Draw rectangle
  image2d.fillRect(100, 100, 50, 50);
} else {
  // Non Canvas handling code.
} // End if Canvas is supported

To colour the lines rather than the fill you can use the strokeStyle property. Both fillStyle and strokeStyle can take the hex colour codes, rgb() colour function from CSS and if the environment like a web browser supports them you can use the hsl() colour function from CSS 3 and the rgba(), hsla() colour functions for opacity colours.

 Rectangles can be drawn providing the x and y values for the top left corner and the width and height values as the parameters of the fillRect(), strokeRect() and clearRect() 2d methods. fillRect() draws a fully coloured rectangle, strokeRect() draws a rectangle line box and clearRect() draws a transparent rectangle.

 For more complex images than rectangles you use paths. To start a path you open it using the beginPath() 2d method with no parameters. Moving the virtual pen or pencil you use the moveTo() 2d method with the x and y values of the location to move to. Lines are drawn using the lineTo() 2d method also with x and y values as the parameters.

 A quadratic bezier curve can be drawn with quadraticCurveTo() method with the x and y values of the curve point and x and y values of the end of the curve. For a cubic bezier curve you provide the x and y values for the first curve point, x and y values for the second curve point and the x and y values of the end of the curve as parameters of the bezierCurveTo() method.

 If it is not an open path then you need to use closePath() method without parameters. Whether or not the path is open or closed you need to specify the stroke() and / or fill() methods if you want the lines and / or filled colour to actually be visible.

For a more in depth tutorial on canvas: Mozilla Canvas Tutorial seems to be the prominent one.

Selectors API

This new application programming interface (API) allows you to use the power of Selectors from Cascade StyleSheets (CSS) to obtain a single element or an array of elements. Only two methods are added to the document object and the element object of the Document Object Model.

The first is querySelector() which obtains the first element that the selector matches. querySelectorAll() provides an array of all elements that match the selector. So for an equivalent comparison:

// Instead of
meEL = document.getElementById("me");

// Could use
meEL = document.querySelector("#me");

Now to retrieve an array of all paragraphs with a title attribute that starts with 'itemDesc':

pARR = divEL.querySelectorAll('p[title^="itemDesc"]');

You can then apply your functions or other DOM manipulation on the whole collection of obtained elements.

Mozilla 1.9.1 like Firefox 3.5, Presto 2.2 like Opera 10 and Trident 4 Standards Mode like Windows Internet Explorer 8 Standards Mode, WebKit based browsers like Safari and Chromium based like Google Chrome support the Selectors API level 1. But all selectors with this API is limited to the support of all the CSS 2.1 and 3 Selectors that the web browser supports generally for StyleSheets. So Internet Explorer 8 and under has a limited CSS 3 collection of Selectors but at least has a full CSS 2.1 selectors collection.