Section 10.6. Element and Access in Context


10.6. Element and Access in Context

Another important element in the DOM Core is, appropriately enough, Element. All objects within a document inherit a basic set of functionality and properties from the Element. The majority of the functionality has to do with getting and setting the attributes, or checking for the existence of attributes:

  • getAttribute( name )

  • setAttribute( name,value )

  • removeAttribute( name )

  • getAttributeNode( name )

  • setAttributeNode( attr )

  • removeAttributeNode( attr )

  • hasAttribute( name )

There are other methods, most having to do with the namespaces associated with the attributes, but these aren't methods you'll typically use with a web page.

Attributes are not always properties. Attributes change by element, with some elements having attributes such as width and align, while others don't. Properties are a component of the object class, rather than instances of the class. So properties would be associated with the document object, Element, Node, or even the HTML elements such as HTMLDocumentElement. But if you want to work with an element's attributes, and they're not exposed as a property on the object class, you'll need to use these Element methods.

Here's an image embedded in a web page:

<img src="/books/4/327/1/html/2/dotty.gif" width="100" alt="an image" align="left" />

The following code accesses the image's attributes, concatenating them into a string, which is then printed in an alert:

  var img = document.images[0];   var imgStr = img.getAttribute("src") + " " +                 img.getAttribute("width") + " " +                img.getAttribute("alt") + " " +                img.getAttribute("align");   alert(imgStr);

The following changes the value for the width and the alt:

  img.setAttribute("width","200");   img.setAttribute("alt","This was an image");

Element also shares a method with the document, getElementsByTagName. Rather than work on all elements within the document, it operates on elements within context.

All the examples so far in the book have operated, more or less, within the context of the document object. For the most part, this is sufficient. However, there will be times when you'll want to work only with those elements nested within another element. Through the functionality inherited by the DOM Core, especially the Node and Element objects, any object in the page that can be accessed through a discrete access method such as getElementById can form a new context for working with content.

In the following HTML, two DIV blocks contain paragraphs: the first contains two; the second, one:

<div id='div1'> <p>one</p> <p>two</p> </div> <div id='div2'> <p>three</p> </div>

The paragraphs don't have identifiers to access each individually using getElementById. You can, instead, use getElementsByTagName by passing in the paragraph tag:

var ps = document.getElementsByTagName("p");

However, doing so, you'll get all paragraphs in the document. This might be what you want, but what if you want just the paragraphs within the first DIV block?

To access the paragraphs within this new context, you'll access the DIV element using getElementById (or whatever approach you wish):

var div = document.getElementById("div1");

Then, via inheritance from the Element object, you can use getElementsByTagName to get all paragraphs:

var ps = div.getElementsByTagName("p");

The only paragraphs in the node list returned are those nested within the first DIV block, identified by div1.

As more web pages are designed using CSS that are built in layers with elements nested within other layers, working with elements in context is a way to maintain some level of control over which components of the page are impacted by the JavaScript application. This is never more noticeable than when you use this approach to modify the document.




Learning JavaScript
Learning JavaScript, 2nd Edition
ISBN: 0596521871
EAN: 2147483647
Year: 2006
Pages: 151

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net