Client-side JavaScript
|
43
function embolden(node) { // Embolden node n
var b = document.createElement("b");
var p = n.parentNode; // Get parent of n
p.replaceChild(b, n); // Replace n with <b>
b.appendChild(n); // Insert n into <b> tag
}
IE 4 DOM
The IE 4 DOM was introduced in Version 4 of Microsoft’s
Internet Explorer browser. It is a powerful but non-standard
DOM with capabilities similar to those of the W3C DOM. IE
5 and later include support for most basic W3C DOM fea-
tures, but this documentation on the IE 4 DOM is included
because IE 4 is still commonly used. The following subsec-
tions document the IE 4 DOM in terms of its differences
from the W3C DOM, so you should be familiar with the
W3C DOM first.
Accessing document elements
The IE 4 DOM does not support the getElementById()
method. Instead, it allows you to look up arbitrary docu-
ment elements by
id attribute within the all[] array of the
document object:
var list = document.all["mylist"];
list = document.all.mylist; // this also works
Instead of supporting the getElementsByTagName() method,
the IE 4 DOM takes the unusual step of defining a
tags()
method on the all[] array, which exists on document ele-
ments as well as the Document object itself. Here’s how to
find all
<li> tags within the first <ul> tag:
var lists = document.all.tags("UL");
var items = lists[0].all.tags("LI");
Note that you must specify the desired HTML tag name in
uppercase with the
all.tags() method.
44
|
JavaScript Pocket Reference
Traversing the document tree
You can traverse an IE 4 document tree in much the same
way that you can traverse a W3C document tree. The differ-
ence is in the names of the relevant properties: instead of
childNodes[], IE 4 uses children[], and instead of
parentNode, IE 4 uses parentElement. IE 4 does not have any
analogs to
firstChild, nextSibling, and related W3C proper-
ties. One important difference between the IE 4 and W3C
DOMs is that the IE 4 document tree only includes HTML
tags: comments are ignored and document text is not part of
the tree itself. Instead, the text contained by any element is
available through the
innerHTML and innerText properties of
the element object. (We’ll see more about
innerHTML in the
next section.)
Modifying document content and structure
The nodes of an IE 4 document tree are Element objects that
are similar to the Element node of the W3C DOM. Like the
Element nodes of a W3C document tree, these objects have
properties that correspond to the attributes of the HTML
tags, and you can query and set the properties as desired. To
change the textual content of a document element, set its
innerText property to the desired text. This deletes any exist-
ing tags or text within the element and replaces it with the
specified text.
The IE 4 DOM does not have any methods for explicitly cre-
ating, inserting, removing, or replacing nodes of the docu-
ment tree. However, it does support the very important
innerHTML property, which allows you to replace the content
of any document element with an arbitrary string of HTML.
Doing this requires an invocation of the HTML parser, mak-
ing it less efficient than manipulating the nodes directly. On
the other hand, it is tremendously convenient, so much so
that Mozilla, Netscape 6 and later, and other modern brows-
ers have implemented
innerHTML despite the fact that it is
non-standard.

Get JavaScript Pocket Reference now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.