test/dom/dom.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="expires" content="0">
<meta name="keywords"
  content="SGML, HTML, Event, Handler, Character Reference, Script">
<meta name="DC.Title"
  content="Referencing Document Elements Utilizing the W3C Document Object Model (DOM)">
<meta name="DC.Creator" content="Thomas Lahn (PointedEars@gmx.de)">
<meta name="DC.Subject" content="Test Case">
<meta name="DC.Description" content="">
<meta name="DC.Publisher" content="Thomas Lahn (PointedEars@gmx.de)">
<meta name="DC.Date" content="2002-08-03T22:16:00+02:00">
<meta name="DC.Type" content="Service">
<meta name="DC.Format" content="text/html">
<meta name="DC.Identifier"
  content="http://pointedears.de.vu/scripts/dom.htm">
<meta name="DC.Source" content="Discussion in de.comp.lang.javascript">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="All rights reserved to the author.">
<meta name="GENERATOR" content="Quanta Plus">
<title>Referencing Document Elements Utilizing the W3C Document
Object Model (DOM)</title>
<style type="text/css">
<!--
body {
  color: black;
  background-color: white;
}

a:link,a:visited,a:active,a:focus {
  text-decoration: none
}

a:link {
  color: blue;
  background-color: white;
}

a:visited {
  color: #800080;
  background-color: #ffffff;
}

a:link :hover {
  text-decoration: underline;
  background-color: white;
  color: red;
}

strong.textmarker {
  color: black;
  background-color: yellow;
}
-->
</style>
</head>
<body>
<h1>Referencing Document Elements Utilizing the W3C Document Object
Model (DOM)</h1>
<p style="font-size: small;">Available online: <a
  href="http://pointedears.de.vu/scripts/dom.htm">http://pointedears.de.vu/scripts/dom.htm</a><br>
Copyright &copy; 2002 <img src="../media/mail.gif" width="14"
  height="15" border="0" alt="@">&nbsp;<a href="mailto:Thomas%20'PointedEars'%20Lahn%20<PointedEars
  @gmx.de>?subject=dev/js/events">Thomas&nbsp;'PointedEars'&nbsp;Lahn</a>.
All rights reserved.</p>
<h2>Source Code</h2>
<pre>
[...]
&lt;a href=&quot;...&quot; ...&gt; ... &lt;/a&gt;
[...]
&lt;a href=&quot;...&quot; ...&gt; ... &lt;/a&gt;
[...]
&lt;script type=&quot;text/javascript&quot;&gt;
  function showType() {
    alert(typeof document.getElementById(&quot;hello1&quot;));
    alert(typeof document.getElementsByName(&quot;hello2&quot;));
    alert(typeof document.getElementsByTagName(&quot;a&quot;));
    alert(document.getElementById(&quot;hello1&quot;).firstChild.nodeValue);
    alert(document.getElementsByName(&quot;hello2&quot;)[0].firstChild.nodeValue);
    alert(document.getElementsByTagName(&quot;a&quot;)[2].firstChild.nodeValue);
  }
&lt;/script&gt;
&lt;p&gt;&lt;a href=&quot;#&quot; id=&quot;hello1&quot; name=&quot;hello2&quot; onclick=&quot;showType(); return false;&quot;&gt;Click Me!&lt;/a&gt;&lt;/p&gt;
    </pre>
<h2>Example</h2>
<span style="font-size: small">(requires JavaScript)</span>
<br>
<script type="text/javascript">
      function showType() {
        alert(typeof document.getElementById("hello1"));
        alert(typeof document.getElementsByName("hello2"));
        alert(typeof document.getElementsByTagName("a"));
        alert(document.getElementById("hello1").firstChild.nodeValue);
        alert(document.getElementsByName("hello2")[0].firstChild.nodeValue);
        alert(document.getElementsByTagName("a")[2].firstChild.nodeValue);
      }
    </script>
<p><a href="#" id="hello1" name="hello2"
  onclick="showType(); return false;">Click Me!</a></p>
</body>
</html>