|
|
DOM Access |
The most effective way to access most tags in your page is through assigning each tag a unique ID attribute, and then using the document.getElementById() function, using the tag's id as it's parameter. This will return to you a pointer to the tag in question, and you can use it to refer to the tag, and manipulate any properties it may have. There are two ways you can go about this, first by storing that pointer in a variable and using it from there, and second by simply using document.getElementById() as though it was the variable itself. Below is a pair of examples of an image tag's src property being changed through both methods - remember that both methods work equally well. The image tag can be assumed to have an id attribute on it labelling it as "theImage".
The main advantage to the first method is that it can make your program shorter and easier to read - if you are making frequent use of the object, it is easier to type the name of the variable the pointer is stored in than to constantly re-type document.getElementById("theImage").
In some cases, Javascript provides easier methods of accessing the tags in your page, by grouping together all of the tags of a specific type into something called a collection. This collection could contain all of the images in your HTML file, or all of the option tags inside of a select box in a form.
A collection is an array which contains all of the sub-objects of a certain type which are inside of the Object the collection is on.
For example, if you consider the document object, which represents the entire web page, and look at the images collection on it, (document.images), you will have an array which contains the objects representing each image on the page in question. You could then swap the first two images with the following code, which has been attached to a button on this page:
Additionally, if you wish to address a specific member of a collection, you can refer to it as though it was a property of that collection, for example, with the following source code:
Since all collections are also arrays, they all have a length property, which can tell you how many items are in that particular collection. In this case, document.images.length gives us as the number of images present in the page. If you scroll down, you'll notice that this number is not quite accurate (three at the top, two just above this paragraph, and three below make 8, not 5! Plus, all of the images currently hidden in the menu...) The reason for this is a very important thing to remember while programming in Javascript:
All XHTML files are processed one line at a time, including Javascript and stylesheets!
If you want to use a function or variable in Javascript, you have to create it first, then use it lower down in the file - in the same way, an XHTML tag must have been reached in the file before you can access it with Javascript! In the following example, we first run some javascript on the image tags, then actually create the tags - this will not work:
Running the javascript above seems to have no effect (the "X" is displayed first, even though the Javascript says to swap the images!), but in Firefox, if you go to Tools/Web Developer/Error Console in the menus:
Note that it isn't the really fact that we're using the object that causes the error, but the place where we tried to use it. If the script code was the source of the error, then the following example wouldn't work either!
So obviously, we need a way around this if we want to do any usefull programming in Javascript. This method is the onload event on the body tag. We'll talk about it more during the DHTML events section, but we've already seen it used a few times with the "onclick" event in this page.
And just as further illustration of how the objects in the document change from line to line, document.images.length now returns as the number of images present in the page. It still isn't including everything, but the three others from the document.images example are now included, because their tags have been processed by the browser.
Other collections which exist in both major browsers include the following:
In the case of the forms collection, any form elements (ie: input tags, select boxes, textareas, radio buttons, etc...) inside of the form are also treated as properties of the individual form. Thus, to access the value displayed inside of the text input field named "blue" in the form named "colours", you would type document.forms.colours.blue.value. More examples of using the forms collection, and items inside of forms can be found on the Document Object Model Examples page.
Additionally, in IE, there are two other object collections of note: all, and children. The children collection contains the objects which represent each of the HTML tags contained directly within the object in question. Thus, in the following code segment, the <P ID="Blob"> tag would have as it's children, one bold tag, and one italics tag. Note that the second bold tag is really inside of the italics tag, so it does not count as a child of the <P ID="Blob"> tag.
The all collection for the previous tag would, however contain ALL of the HTML elements contained by the <P ID="Blob"> tag, which means not only it's own children, but also it's children's children, and their children, right on down the line. To get a listing of all of the HTML tags in a whole document, you can use document.all.