javascript

Chapter 10: The Document Object Model
This element can be retrieved using the following code:
var div = document.getElementById(“myDiv”); //retrieve reference to the < div >
The following code, however, would return null in all browsers except IE:
var div = document.getElementById(“mydiv”);
//won’t work (except in IE)
IE prior to version 8 considered IDs to be case - insensitive, so “ myDiv ” and “ mydiv ” are considered to be
the same element ID. This also occurs in IE 8 running in IE 7 – compatibility mode (where document.
documentMode is 7).
If there is more than one element with the same ID in a page, getElementById() returns the element
that appears first in the document. IE 7 and earlier add an interesting quirk to this, also returning form
elements ( < input > , < textarea > , < button > , and < select > ) that have a name attribute matching the
given ID. If one of these form elements has a name attribute equal to the specified ID, and it appears
before an element with the given ID in the document, IE returns the form element. Here’s an example:
< input type=”text” name=”myElement” value=”Text field” >
< div id=”myElement” > A div < /div >
Using this HTML, a call to document.getElementById() in IE 7 returns a reference to the < input >
element, whereas the same call returns a reference to the < div > element in all other browsers. To avoid
this issue in IE, it ’ s best to ensure that form fields don ’ t have name attributes that are equivalent to other
element IDs.
The getElementsByTagName() method is another commonly used method for retrieving element
references. It accepts a single argument — the tag name of the elements to retrieve — and returns a
NodeList containing zero or more elements. In HTML documents, this method returns an
HTMLCollection object, which is very similar to a NodeList in that it is considered a “ live ” collection.
For example, the following code retrieves all < img > elements in the page and returns an
HTMLCollection :
var images = document.getElementsByTagName(“img”);
This code stores an HTMLCollection object in the images variable. As with NodeList objects, items in
HTMLCollection objects can be accessed using bracket notation or the item() method. The number of
elements in the object can be retrieved via the length property, as this example demonstrates:
alert(images.length);
alert(images[0].src);
alert(images.item(0).src);
//output the number of images
//output the src attribute of the first image
//output the src attribute of the first image
273