DOM: Difference between revisions

From DataFlex Wiki
Jump to navigationJump to search
mNo edit summary
(Tidy up and categorisation)
Line 1: Line 1:
= Document Object Model=
The '''Document Object Model''', or '''DOM''' is an object model used for referencing items on [[XML]] or [[HTML]] files.  The DOM is commonly used when writing [[Javascript]] code to access elements of a web page.


all elements in a html page can have an id and be altered .
==Examples==


Here's how to grab the element by the id and change it using javascript:
===Altering an attribute of a HTML Element===


Javascript can access elements of a webpage by referring to their ID values.  The following line of HTML is for a link that has an id of "url" and points to "http://www.yahoo.com":


<pre>
<pre>
<a id="url" href="http://www.yahoo.com">testing</a>
</pre>


<a id="link" href="http://www.yahoo.com">testing</a>
The following Javascript code will find the Element with an id value of ''url'', and will then set the href attribute of it to "http://www.msdn.com"
 
<pre>
<script type="text/javascript">
// This line fetches and handle to the Element with id ''url'' and returns it to the variable ''link''
  link=document.getElementById('link');
  link=document.getElementById('url');
  link.href="http://msdn.com";
// This line sets the href attribute of the link item to "http://www.msdn.com"
</script>
link.href="http://www.msdn.com";
 
</pre>
</pre>


==External Links==
*[http://www.w3.org/DOM/ w3c DOM Specifications]
*[http://xml.com/pub/rg/DOM_Tutorials DOM Tutorials]




Now  when you see the link it should link to msdn.com even though the original href points to www.yahoo.com
[[Category: Web Programming]]

Revision as of 09:12, 22 November 2007

The Document Object Model, or DOM is an object model used for referencing items on XML or HTML files. The DOM is commonly used when writing Javascript code to access elements of a web page.

Examples

Altering an attribute of a HTML Element

Javascript can access elements of a webpage by referring to their ID values. The following line of HTML is for a link that has an id of "url" and points to "http://www.yahoo.com": 

<a id="url" href="http://www.yahoo.com">testing</a>

The following Javascript code will find the Element with an id value of url, and will then set the href attribute of it to "http://www.msdn.com" 

 // This line fetches and handle to the Element with id ''url'' and returns it to the variable ''link''
 link=document.getElementById('url');
 // This line sets the href attribute of the link item to "http://www.msdn.com"
 link.href="http://www.msdn.com";

External Links

Retrieved from "https://dataflex.wiki/index.php?title=DOM&oldid=978"