DOM: Difference between revisions
From DataFlex Wiki
Jump to navigationJump to search
Hellboy1975 (talk | contribs) Tidy up and categorisation |
Hsymington (talk | contribs) m Changed from Web Programming to Web Applications category |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{underconst}} | |||
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. | 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== | ==Examples== | ||
| Line 7: | Line 11: | ||
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": | 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": | ||
< | <source lang="html"> | ||
<a id="url" href="http://www.yahoo.com">testing</a> | <a id="url" href="http://www.yahoo.com">testing</a> | ||
</ | </source> | ||
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" | 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'' | // This line fetches and handle to the Element with id ''url'' and returns it to the variable ''link'' | ||
link=document.getElementById('url'); | link=document.getElementById('url'); | ||
// This line sets the href attribute of the link item to "http://www.msdn.com" | // This line sets the href attribute of the link item to "http://www.msdn.com" | ||
link.href="http://www.msdn.com"; | link.href="http://www.msdn.com"; | ||
</ | </source> | ||
==External Links== | ==External Links== | ||
| Line 24: | Line 28: | ||
[[Category: Web | [[Category: Web Applications]] | ||
Latest revision as of 14:07, 8 April 2020
DOM page under construction
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
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";
