dom_methods.asp

W3Schools tutorial..web designing

</ul>
<p><b>Note:</b> In the list above, x is a node object (HTML element).</p>
<hr  />
<h2>HTML DOM Methods</h2>
<ul>
	<li>x.getElementByID(<i>id</i>) - get the element with a specified id</li>
	<li>x.getElementsByTagName(<i>name</i>) - get all elements with a specified 
	tag name</li>
	<li>x.appendChild(<i>node</i>) - insert a child node to x</li>
	<li>x.removeChild(<i>node</i>) - remove a child node from x</li>
</ul>
<p><b>Note:</b> In the list above, x is a node object (HTML element).</p>
<hr  />
<h2>innerHTML</h2>
<p>The easiest way to get or modify the content of an element is by using the 
innerHTML property.</p>
<p>innerHTML is not a part of the W3C DOM specification. However, it is 
supported by all major browsers.</p>
<p>The innerHTML property is useful for returning or replacing the content of 
HTML elements (including &lt;html&gt; and &lt;body&gt;), it can also be used to view the 
source of a page that has been dynamically modified.</p>
<h2>Example</h2>
<p>The JavaScript code to get the text from a &lt;p&gt; element with the id &quot;intro&quot; in 
a HTML document:</p>
<p>txt=document.getElementById(&quot;intro&quot;).innerHTML</p>
<p>After the execution of the statement, txt will hold the value &quot;Hello World!&quot;
</p>
<p>Explained:</p>
<ul>
	<li><b>document</b> - the current HTML document</li>
	<li><b>getElementById(&quot;intro&quot;)</b> - the &lt;p&gt; element with the id &quot;intro&quot;</li>
	<li><b>innerHTML</b> - the inner text of the HTML element</li>
</ul>
<p>In the example above, getElementById is a method, while innerHMTL is a property. </p>
<p><a target="_blank" href="../js/tryit.asp@filename=try_dom_methods">Try it 
yourself</a></p>
<hr  />
<h2>childNodes and nodeValue</h2>
<p>The W3C DOM specified way of getting to the content of an element works like 
this:</p>
<p>The JavaScript code to get the text from a &lt;p&gt; element with the id &quot;intro&quot; in 
a HTML document:</p>
<p>txt=document.getElementById(&quot;intro&quot;).childNodes[0].nodeValue</p>
<p>After the execution of the statement, txt will hold the value &quot;Hello World!&quot;
</p>
<p>Explained:</p>
<ul>
	<li><b>document</b> - the current HTML document</li>
	<li><b>getElementById(&quot;intro&quot;)</b> - the &lt;p&gt; element with the id &quot;intro&quot;</li>
	<li><b>childNodes[0]</b> - the first child of the &lt;p&gt; element (the text 
	node)</li>
	<li><b>nodeValue</b> - the value of the node (the text itself)</li>
</ul>
<p>In the example above, getElementById is a method, while childNodes and 
nodeValue are properties. </p>
<p><a target="_blank" href="../js/tryit.asp@filename=try_dom_methods2">Try it 
yourself</a></p>
<p>In this tutorial we will mostly use the innerHTML property. However, learning 
the method above is useful for understanding the tree structure of the DOM and 
dealing with XML files.</p>

<hr />
<a href="dom_nodetree.asp"><img border="0" alt="previous" src="../images/btn_previous.gif" width="100" height="20" /></a>
<a href="dom_nodes_access.asp"><img border="0" alt="next" src="../images/btn_next.gif" width="100" height="20" /></a>
<hr />

<!-- **** SPOTLIGHTS 1 **** -->

<iframe src="../banners/aspallframe.asp" height="110" width="485"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<hr />
<!-- **** SPOTLIGHTS 2 **** -->

<h2>Want To Be A Web Master?</h2>
<p>If you want to be a Web Master, you will have to host your web site with an ISP (Internet Service Provider).</p>
<p>MaximumASP offers seven different configurations of dedicated servers to meet your Windows and .NET hosting needs.
Hosted on our multi-tiered Enterprise Class network, these servers provide the performance, security and reliability
you need to host your high end web sites and applications. 
</p>
<p><a target="_blank" href="../../www.maximumasp.com/about/specials.aspx">Visit MaximumASP</a></p>
<hr />


<!-- **** SPOTLIGHTS 3 **** -->
<table cellpadding="0" cellspacing="0"><tr><td width="72"></td><td>
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txt*/
google_ad_slot = "1699448869";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
<hr />

<center>

<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*imgtxt*/
google_ad_slot = "8606855891";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</center>
<hr />


<!-- **** END SPOTLIGHTS **** -->

</td></tr>

<tr><td>
<p>Jump to: <a href="#top" target="_top"><b>Top of Page</b></a>
or <a href="../default.asp" target="_top"><b>HOME</b></a> or
<a href='dom_methods.asp@output=print' target="_blank">
<img src="../images/print.gif" alt="Printer Friendly" border="0" />
<b>Printer friendly page</b></a></p>
<p>W3Schools provides material for training only. We do not warrant the correctness of its contents.
The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our
<a href="../about/about_copyright.asp">terms of use</a> and
<a href="../about/about_privacy.asp">privacy policy</a>.
</p>
<p><a href="../about/about_copyright.asp">Copyright 1999-2008</a> by Refsnes Data. All Rights Reserved.</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
<td width="60%" align="left">
<a href="../../validator.w3.org/check@uri=referer" target="_blank">
<img src="../images/vxhtml.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../jigsaw.w3.org/css-validator/check@uri=referer" target="_blank">
<img src="../images/vcss.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance" target="_blank">
<img src="../images/wai.gif" alt="W3C-WAI level A conformance icon" width="88" height="31" border="0" /></a>
</td>
<td>
<a href="../xhtml/xhtml_howto.asp" target="_top">W3Schools was converted to XHTML in December 1999</a>
</td></tr>

</table>
</td></tr>
</table>
</td>


<td width="145" align="center" valign="top">




<iframe style="background-color:#f1f1f1" src="../banners/rightcolumn.asp@secid=htmldom" height="1500" width="147"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
</iframe>

</td>
</tr></table>

</body>
</html>