DOM: Using Elements

Elements in the DOM provide a rich set of tools for altering style and content. The following demo illustrates several of them. To try it

read the "demo paragraph" below
click the "try it" link
look at the code to see what will execute next

As you click through the demo, the code about to be executed will be highlighted, and the demo paragraph will provide additional notes, as well as be altered by the code that just ran.


var P = document.getElementById("demo_P");  // find the "demo paragraph"
P.style.border ="1px solid #fa0";  // orange
P.style.backgroundColor="#ff9";  // light yellow
P.style.visibility="hidden";
P.style.visibility="visible";
P.style.display="none";
P.style.display="block";
var newtext = document.createTextNode("[ THIS TEXT ADDED BY JAVASCRIPT. ]");
P.appendChild(newtext);  
P.insertBefore(P.lastChild,P.firstChild)  
P.firstChild.nodeValue = "[ I'M THE REPLACEMENT TEXT. ]";
P.removeChild(firstChild);
window.location.reload();

demo paragraph

The opening P tag of this demo paragraph is marked this way, <p id="demo_P">, so getElementById() can find it. (Click "Try it" at the left to start.)

highlighting
The lines of code are LI elements in a UL. They're retrieved by tag name. Each click on the link increments a number that identifies the line of code to highlight.

dynamic link
"Try it" is a standard link in an A element. It calls "demo()" which executes the correct bit of script. To prepare for the next call, demo() uses A's "firstChild.nodeValue" to update the link's text, and "setAttribute()" to update its action.

Try it.
(If you're curious, here's a quick note about how the demo works.)

CSS & Javascript

As you can see, javascript's "style" object closely follows the property names defined by CSS. However, not all names are identical.

Hyphenated CSS property names must be written in MixedCase. For example:

style.fontWeight (instead of "font-weight")
style.borderTopWidth (instead of "border-top-width")

Also, "class" and "float" are reserved words for javascript. Use "style.className" and "style.CSSFloat" to refer to these CSS properties.

Finally, if you need to apply several style changes, you can combine them into 1 statement, using the style object's cssText property. These lines:

P.style.border="1px solid #fa0"
P.style.backgroundColor="#f9a";

can be written as:

P.style.cssText="border: 1px solid #fa0; background-color: #f9a";

Javascript doesn't interpret quoted text as a mathematical instruction, so hyphenated CSS names, such as "background-color", should be written normally for cssText.

the "class" attribute

The "style" object is convenient, but when several styles are in play, it's better to assign your element to a CSS class which you've declared in a normal style sheet. The rules are simpler to maintain, and the page is faster — the browser reformats the document just once when the class is applied.

CLASS is considered an "attribute" of an element (as are other things you might place in an opening tag, such as ID, ONCLICK, ONMOUSEOVER, HREF, SRC, etc.). So to assign an element to a CSS class, use the element's "setAttribute()" method.


var P = document.getElementById("demo2_P");
P.setAttribute("class","demo");
P.setAttribute("class",P.getAttribute("class") + " smallcaps");
P.removeAttribute("class");

The style sheet for this page contains a "demo" class that sets styles for font, border, and background.

Try it.

switching style sheets

Sweeping changes to the document's style can be applied in the same way. If your page links to an external style sheet, the LINK's HREF attribute can be pointed to another sheet. The browser will reformat the document on-the-fly.

This page gets its style through this LINK:

<link rel="stylesheet" href="DOM.css" type="text/css" />

If the page linked to several styles, and if their order didn't change, you could locate specific LINKs this way:

var links = document.getElementsByTagName('link');
links[0].getAttribute("href");  // 1st link's HREF value
links[1].getAttribute("href");  // 2nd link's HREF value

Alternately, you could assign IDs to each LINK and locate them as usual with "document.getElementById()".

The page only links to 1 style sheet, so "getElementsByTagName('link')[0]" works well to find it. (Here are other ways.)

The next script changes the style sheet for this page. The 1st 2 lines find our LINK and retrieve its HREF value. The 3rd line sets "s" to "DOM.css" or "DOM3.css". The last line updates the HREF.

var E = document.getElementsByTagName('link')[0];  // find 1st LINK in document
var s = E.getAttribute("href");
s = ( s=='DOM.css' ) ? 'DOM3.css' : 'DOM.css';
E.setAttibute("href",s);

Toggle Style.

If you wanted, you could combine the last 3 lines (above) into a single statement:

E.setAttribute( "href", (E.getAttribute("href")=="DOM.css") ? "DOM3.css" : "DOM.css" );

Javascript resolves everything after "href", to a single value ("DOM2.css" or "DOM.css") before invoking the setAttribute() method.

More typically, you'd allow your user to select the style from a menu. In that case, the name of the style sheet would be passed to your script, so you could update the style more simply.

function update_style(newstyle) {
 document.getElementsByTagName('link')[0].setAttribute("href",newstyle);
}

something from nothing

This page has focused on using elements that already exist in a document — although createTextNode() and setAttribute() are shown along the way. The next page concentrates on creating new elements, attaching, altering, moving, and removing them.

The techniques on this and the next page are well-documented on the web. Mozilla's Gecko DOM reference provides a thorough overview. (See especially links for Methods under DOM element Reference and DOM document Reference.)

DOM: Creating Elements

DOM: Finding Elements