DOM: Difference between revisions

← Older edit

DOM (view source)

Revision as of 15:07, 8 April 2020

801 bytes added , 8 April 2020

m

Changed from Web Programming to Web Applications category

Hsymington

Administrators

280

edits

@@ Line 1: / Line 1: @@
-= Document Object Model=
-all elements in a html page can have an id and be altered .
+{{underconst}}
-Here's how to grab the element by the id and change it using javascript:
+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.
+Knowing how use the DOM can be essential to understand how to alter values on a existing web page in an easy way.
+==Examples==
-<pre>
+===Altering an attribute of a HTML Element===
-<a id="link" href="http://www.yahoo.com">testing</a>
+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":
-<script type="text/javascript">
+<source lang="html">
- link=document.getElementById('link');
+<a id="url" href="http://www.yahoo.com">testing</a>
-  link.href="http://msdn.com";
+</source>
-</script>
-</pre>
+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"
+<source lang="js">
+ // 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";
+</source>
+==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 http://msdn.com even though the original href points to www.yahoo.com
+[[Category: Web Applications]]