webslave.ws

I know that you are a “simplicity lover” and that’s why I would like to share with you an example that I am sure you are going to apply to your website and in the same way to improve. When we talk about Asynchronous JavaScript and XML some beginners are thinking that they have to implement difficult techniques related to XML and Java Script. I personally think that AJAX is the most revolutionary combination that is helping many programmers, webmasters and web developers around the world to develop more efficient web pages. In this section I would like to talk about Document Object Model and how useful it could be to your webpage and your developing projects.

What is Document Object Model?

It is a solution that has the ability to work as an interface that allows scripts and programs access and update dynamically a web page. DOM is capable to modify not only the content but the structure and the style of documents in a website. The advantage of DOM is that a document can be processed and you can see the product of this processing. The DOM is an internal view of your entire website and it is accessible by scripts languages such as JavaScript and others. Document Object Model (DOM) works as an independent object model representing diverse formats related to HTML or XML.

How useful is Document Object Model “DOM”?

When you are aware of the advantages of DOM immediately you start using it in your web pages. DOM is useful because it is a smart way to optimize your website in order you don’t have to waste time writing a lot of code or having problems with your XML files. The Document Object Model (DOM) is capable to manipulate the data model only in memory and not the representation as XML. The DOM works with the tags of your website modifying them, inserting, or removing them. When you are developing websites in Asynchronous JavaScript and XML (AJAX) will have the opportunity to create dynamic pages, more efficient and without having to code a lot.

Which examples do we have available related to Document Object Model? There are too many examples that I can show you related to Document Object Models but in this section, I will show you a simply example about how set the content located in the >div> element with the id “merry Christmas” to “Happy New Year”

<script type="text/javascript">
function replace() {
  document.getElementById('Merry Christmas').innerHTML = "Happy, <b>AJAX</b> New Year!";
}
</script>
 
<p><a href="javascript:replace()">Replace Text</a></p>
 
<div id="Merry Christmas">
  Happy New Year!
</div>

Happy New Year!