Accessing HTML Elements with the W3C DOM

The W3C DOM adds the getElementById method. (Note that the W3C DOM doesn't support the all collection.) You can use that method to access elements that have an ID value in Netscape Navigator 6+ and Internet Explorer 5+:

 <HTML>      <HEAD>          <TITLE>              Accessing HTML Elements          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function getText()              {                  if(navigator.appName == "Netscape") {                  alert("document.form1.text1.value = " + document.form1.text1.value)                  alert("document.forms[0].text1.value = " +                  document.forms[0].text1.value)                  alert("document.getElementsByName(\"text1\")[0].value = "                      + document.getElementsByName("text1")[0].value)                  alert("document.getElementsByTagName(\"INPUT\")[0].value = "                      + document.getElementsByTagName("INPUT")[0].value)  alert("document.getElementById(\"text1\").value = "   + document.getElementById("text1").value)  }                  if (navigator.appName == "Microsoft Internet Explorer") {                  alert("document.form1.text1.value = " + document.form1.text1.value)                  alert("document.forms[0].text1.value = "                      + document.forms[0].text1.value)                  alert("document.all.text1.value = "                        + document.all.text1.value)                  alert("document.all[\"text1\"].value = "                        + document.all["text1"].value)                  alert("document.getElementsByName(\"text1\")[0].value = "                      + document.getElementsByName("text1")[0].value)                  alert("document.getElementsByTagName(\"INPUT\")[0].value = "                      + document.getElementsByTagName("INPUT")[0].value)                  alert("document.all.tags(\"INPUT\")[0].value = "                        + document.all.tags("INPUT")[0].value)  alert("document.getElementById(\"text1\").value = "   + document.getElementById("text1").value)  }              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Accessing HTML Elements</H1>          <FORM NAME="form1">              <INPUT TYPE="TEXT" NAME="text1" ID="text1">              <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="getText()">          </FORM>      </BODY>  </HTML>

The W3C DOM also supports properties and methods to enable you to navigate through a web page to the element you want; you can see some of these properties and methods in Tables 4.3 and 4.4. Here's an example that finds the text in the same text field as before; but this time, I'll use the W3C DOM properties and methods . Here's the web page we'll be using:

 <HTML>      <HEAD>          <TITLE>              Accessing HTML Elements          </TITLE>      </HEAD>      <BODY>          <H1>Accessing HTML Elements</H1>          <FORM NAME="form1">  <INPUT TYPE="TEXT" NAME="text1" ID="text1">  <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="getText()">          </FORM>      </BODY>  </HTML>

I start by getting a node object corresponding to the body element like this, using getElementById . (I could, of course, have accessed the text field directly this way; for the purposes of this example, however, I'll start from the <BODY> tag.)

 var body1 = document.getElementById("body")          .          .          .

Next , I get the first child node of the body node, which is the node corresponding to the <H1> element:

 var body1 = document.getElementById("body")  var h1 = body1.childNodes[0]  .          .          .

To get to the form, I can use the nextSibling property:

 var body1 = document.getElementById("body")  var h1 = body1.childNodes[0]  var form1 = h1.nextSibling  .          .          .

Finally, I reach the text field, which is the first child node of the form, and display the text field's value like this:

 var body1 = document.getElementById("body")  var h1 = body1.childNodes[0]  var form1 = h1.nextSibling  var text1 = form1.childNodes[0]  alert(text1.value)          .          .          .

That's how things workin the Internet Explorer. The Netscape Navigator, on the other hand, treats the indentation whitespace in this HTML document as text nodes, as discussed in the beginning of this chapter, which means we have to get not the first child node of the body and form objects, but the second child node. That looks like this in a combined web page (you'll need Netscape Navigator 6+ or Internet Explorer 5+ here because this code uses the getElementById method, which isn't available before those browsers):

(Listing 04-12.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Accessing HTML Elements          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function getText()              {  if(navigator.appName == "Netscape") {   var body1 = document.getElementById("body")   var h1 = body1.childNodes[1]   var form1 = h1.nextSibling.nextSibling   var text1 = form1.childNodes[1]   alert(text1.value)   }  if (navigator.appName == "Microsoft Internet Explorer") {                   var body1 = document.getElementById("body")                   var h1 = body1.childNodes[0]                   var form1 = h1.nextSibling                   var text1 = form1.childNodes[0]                   alert(text1.value)                }              }              // -->          </SCRIPT>      </HEAD>      <BODY ID="body">          <H1>Accessing HTML Elements</H1>          <FORM NAME="form1">              <INPUT TYPE="TEXT" NAME="text1" ID="text1">              <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="getText()">          </FORM>      </BODY>  </HTML>

You can see the result of this code in Figure 4.10now we're using W3C DOM navigation techniques to move around in web pages.

Figure 4.10. Using W3C DOM navigation techniques.

graphics/04fig10.gif

In general, the W3C DOM properties and methods are good for working with an HTML document as a tree of nodesnot only can you navigate through a document as we've just seen, you also can manipulate the nodes and node positions in a document. We'll see more on this in Chapter 16, but here's an example; in this case, I'll use the insertBefore method to change a list of items in an ordered HTML list from:

Now
is
the
time.

To this:

Now
is
not
the
time.

Here's it worksI create the new <LI> element with the createElement method, and then use the innerHTML property to add text to this new element (more on innerHTML in Chapter 16). Then I use the insertBefore method to insert this new element into the list (note that once again, the node location is different in the Internet Explorer and Netscape Navigator because of whitespace, and note that you'll need Netscape Navigator 6+ or Internet Explorer 5+ here):

(Listing 04-13.html on the web site)

 <HTML>      <HEAD>          <TITLE>Inserting New Nodes</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function addItem()              {                  var listItem1 = document.createElement("LI")                  listItem1.innerHTML = "not"                  if(navigator.appName == "Netscape") {                  document.getElementById("List1").insertBefore(listItem1,                      document.getElementById("List1").childNodes[3])                  }                  if(navigator.appName == "Microsoft Internet Explorer") {                  document.getElementById("List1").insertBefore(listItem1,                      document.getElementById("List1").childNodes[2])                  }              }             // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Inserting New Nodes</H1>              <FORM>                  <INPUT TYPE="button" VALUE="Insert Item" ONCLICK="addItem()">              </FORM>              <OL ID="List1">                  <LI>Now                  <LI>is                  <LI>the                  <LI>time.              </OL>      </BODY>  </HTML>

You can see the results of this code in Figure 4.11 before the new node is added, and in Figure 4.12 after the button was clicked and the new node was added.

Figure 4.11. Inserting new nodes.

graphics/04fig11.gif

Figure 4.12. A new node.

graphics/04fig12.gif

We'll see more on using W3C DOM properties and methods for working with nodes in Chapter 16.

And that's itthat gives us the overview we'll need for the coming chapters. Here, we saw what's going on in the browser environment for us as JavaScript programmers, including an overview of the various DOM levels, the browser objects available, and cross-browser issues. Now it's time to start digging into all the detailsin the next chapter, I'll start by taking a look at the core properties of HTML elements accessible in JavaScript and how to put them to work.