Accessing HTML Elements
| In the previous couple of chapters, we dealt with the built-in JavaScript syntax. In this chapter, we started working with the browser objects available to you in JavaScript. The built-in objects (such as the window , document , and navigator objects) are always available to you in your codebut what about the HTML elements in a web page? In modern JavaScript, all those elements are treated as objectshow do you get access to them? Let's start with an example; suppose that I want to access the tagName property of the <P> element in this page (this property will return P in this case): <HTML> <HEAD> <TITLE> Accessing HTML Elements </TITLE> </HEAD> <BODY> <H1>Accessing HTML Elements</H1> <P NAME="text1" ID="text1"> Here's the text. </P> <FORM NAME="form1"> <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="getText()"> </FORM> </BODY> </HTML> Using the Netscape Navigator, I could access the <P> element with the getElementsByName or getElementsByTagName methods, both of which return an array of elements. To use these methods , I can pick out the element we're interested using an array index of 0 (because this <P> element is the first element in these arrays):
Note that neither of these methods are available in Netscape Navigator before version 6.0there's no direct way to access elements that are not part of a form before that version. In the Internet Explorer, you also can use the all collection. As we've discussed, there's an element in the all collection for each HTML element in the page. Here are some ways to access the text in the text field in the Internet Explorernote also that the all collection includes a tags method that you can use to locate elements (as discussed in Chapter 6):
TIP In fact, you can drop the document.all and just use text1.tagName . TIP Here's an important thing to know: If you're having trouble accessing an HTML element, it may be because the browser hasn't loaded it yet. In that case, put your script after the point where the HTML element you're trying to access appears in the web page (which may mean moving your script from the head section to the body section of a page). Here's a web page that puts all these techniques to work (note that you'll need version 6+ if you're using Netscape Navigator): (Listing 04-10.html on the web site) <HTML> <HEAD> <TITLE> Accessing HTML Elements </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function getText() { if(navigator.appName == "Netscape") { alert("document.getElementsByName(\"text1\")[0].tagName= " + document.getElementsByName("text1")[0].tagName) alert("document.getElementsByTagName(\"P\")[0].tagName= " + document.getElementsByTagName("P")[0].tagName) } if (navigator.appName == "Microsoft Internet Explorer") { alert("document.all.text1.tagName = " + document.all.text1.tagName) alert("document.all[\"text1\"].tagName = " + document.all["text1"].tagName) alert("document.all.tags(\"P\").tagName = " + document.all.tags("P")[0].tagName) alert("document.getElementsByName(\"text1\")[0].tagName = " + document.getElementsByName("text1")[0].tagName) alert("document.getElementsByTagName(\"P\")[0].tagName = " + document.getElementsByTagName("P")[0].tagName) } } // --> </SCRIPT> </HEAD> <BODY> <H1>Accessing HTML Elements</H1> <P NAME="text1" ID="text1"> Here's the text. </P> <FORM NAME="form1"> <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="getText()"> </FORM> </BODY> </HTML> Let's take a look at another examplethis time, let's access an HTML control in a form. In this case, I'll discuss how to access the text in a text field ( ID and NAME attributes set to "text1" ) embedded in a form named form1 in this web page: <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> The text in this text field is accessible using the text field's value property in JavaScript (which matches its VALUE HTML attribute). There are several ways to access that property; here are some examples in the Netscape Navigatornote that only the first two are available before version 6.0 of that browser:
In the Internet Explorer, you also can use the all collection, like this:
Here's a web page putting these various access techniques to work (again, note that you'll need version 6+ if you're using Netscape Navigator): (Listing 04-11.html on the web site) <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) } 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.all.tags(\"INPUT\")[0].value = " + document.all.tags("INPUT")[0].value) alert("document.getElementsByName(\"text1\")[0].value = " + document.getElementsByName("text1")[0].value) alert("document.getElementsByTagName(\"INPUT\")[0].value = " + document.getElementsByTagName("INPUT")[0].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> TIP When you use the all collection, you can use either square braces or parentheses, like this: document.all["text1"].value or this document.all("text1").value . If two elements have the same ID, you can specify the item you want if you use parentheses, like this: document.all("text1", 1).value .  |
