DOM: Difference between revisions

918 bytes added ,  8 April 2020
m
Changed from Web Programming to Web Applications category
mNo edit summary
m (Changed from Web Programming to Web Applications category)
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:


= Document Object Model=
{{underconst}}


all elements in a html page can have an id and be altered .  
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.


Here's how to grab the element by the id and change it using javascript:
Knowing how use the DOM can be essential to understand how to alter values on a existing web page in an easy way.
==Examples==


===Altering an attribute of a HTML Element===


<pre>
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="link" href="http://www.yahoo.com">testing</a>
<source lang="html">
<a id="url" href="http://www.yahoo.com">testing</a>
</source>


<script type="text/javascript">
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"
  link=document.getElementById('link');
<source lang="js">
  link.href="http://msdn.com";
// This line fetches and handle to the Element with id ''url'' and returns it to the variable ''link''
</script>
  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";
</source>


</pre>
==External Links==
*[http://www.w3.org/DOM/ w3c DOM Specifications]
*[http://xml.com/pub/rg/DOM_Tutorials DOM Tutorials]
 
 
[[Category: Web Applications]]