Use DOM to change the Web interface without refreshing the page
Introduction: The previous article in this series examines the concepts involved in document Object Model (DOM) Programming--web Browser How to treat a Web page as a tree, now you should understand the programming structure used in the DOM. This tutorial will use this knowledge for practice, creating a simple Web page with some special effects, all of which use JavaScript to manipulate the DOM to create without reloading or refreshing the page.
The previous two articles have detailed the Document Object model or DOM, and readers should be very clear about how the DOM works. (See Resources for links to previous two-year DOM articles and earlier articles in the Ajax series.) In this tutorial, this knowledge will be used in practice. We will develop a simple WEB application whose user interface can change depending on the user's actions and, of course, use the DOM to handle changes to the interface. After reading this article, we have applied the techniques and concepts we have learned about DOM.
Suppose the reader has read the previous two articles, and if not, take a look at what the DOM is and how the Web browser transforms the HTML and CSS provided to it into a single, tree-like structure that represents the Web page. All the DOM principles that I've been discussing so far will be used in this tutorial to create a dynamic Web page that works (albeit somewhat simply) based on DOM. If you do not understand the place, you can stop at any time to review the previous two articles and then come back.
Starting from a sample application
Let's start with a very simple application and then add a bit of DOM magic. Keep in mind that DOM can move anything in a Web page without submitting a form, so it's comparable to Ajax; we create a simple Web page that shows only an ordinary old hat and a hocus pocus! button (guess what this is for?) ）
Initial HTML
Listing 1 shows the HTML for this page. In addition to the title and form, there is only one simple picture and a button that can be clicked.
Listing 1. The HTML for the sample application
<title>Magic Hat</title>
<body>
<form name="magic-hat">
<p align="center">
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
This HTML and the pictures used in this article can be found in the downloads later in this article. However, I strongly recommend that you download only that picture, and then start typing the code yourself as the application gradually builds up in this article. This gives you a better understanding of the DOM code than the application that reads this article and then opens it directly.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
