DHTML Object Model (about)

Source: Internet
Author: User
Dhtml|model|object| Object |dhtml " Note: Recently in learning asp.net, think that many of the knowledge of JavaScript is still useful in the ASP.net, and that JavaScript is the essence of the use of script to the DHTML object programming, but the online information about the DHTML hierarchy in Chinese materials is relatively small, so read the MSDN information on the translation of the Come out, I hope everyone will advise. 】
DHTML Object Model (about the DHTML


The Dynamic HTML (DHTML) Document Object model (Document Object Model:D OM) enables Web page makers to directly and programmatically access each individual part of a Web document, regardless of whether the element or container is accessed. This access includes the event model, which allows the browser to respond to user input by executing a script that displays new content based on user input without downloading a new page from the server. The Dynamic HTML Document Object Model (DHTML DOM) provides a convenient way for the vast majority of ordinary Web page makers to provide rich web interactivity.



· What is an object model? (What is the Object Model?)

· Using scripting to access elements (accessing Elements with script)

· Events: bubbling, banning and handling (events:bubbling, canceling, and handling)

· Handle mouse effects (handling rollover effects)

· Prohibited event (canceling events)

· Further thinking (Special considerations)

· Related Topics (Related topics)



What is an object model?
The object model is a DHTML-programmable structure that does not require web-makers to learn any new HTML tags, nor does it involve any new web-making techniques. In fact, the object model is based on web-making techniques that web makers used to have. Recall if you have ever tried using a script to set a value for a form element. Or use a script to add a mouseover event to a link in a Microsoft IE3.0 browser, and if so, you're already accessing your HTML page with a finite form of scripting using the DHTML Object model.

The only difference now in this DHTML object model is that any HTML element is now programmable. This means that any HTML element on the page can have scripts that can be used to interact with the user's actions and dynamically change the content of the page. This event model enables the document to react to a user's actions on a page (for example, when the user moves the mouse pointer over a particular element, presses a keyboard key, or enters a new message in the form). Each event can be linked to a script that tells the browser how to change the content in this interaction without having to return to the server to get a new file. The advantage of this is that web-makers can create rich, interactive code with fewer pages. and the Web browser because no need to wait for new pages from the Web to download to the client, no matter from the browsing speed to the effect of browsing has been a comprehensive upgrade.

accessing elements using scripts
Each HTML element in the object model is a scriptable object with its own set of properties (properties), Methods (Methods), and events. To write a script for an element object, the Web page author must first know how to get an object.

The focus of DHTML is the collection of elements (collection) and how these elements are organized into a hierarchy. The most important of these element collections is the all collection (all collection) and the Children Collection (children collection). A DHTML document is a set of structured elements in the following example, each element has its own range of effects, depending on where the tag appears in the document.

<HTML>
<BODY>
<DIV>
<p>some text in a
<B>paragraph</B>
</P>

</DIV>

</BODY>
</HTML>
In the example above, the Div object contains a P object and an IMG object called Image1, which is also the parent of the two objects, and the relative P object and the IMG object are children of the Div object (children). The IMG object called Image2 is the child of the body object.

Each element object has a collection of objects called All and a collection of objects called children, and the object set of all contains all the objects under this element hierarchy, while the Children object collection contains all the immediate descendant elements of the current element. In the example above, B is in the all collection of the Div object, but it does not appear in the Children collection of the Div object; Similarly, the Div object is a member of the body object all collection, and the P object is not.

Each element, in addition to having the above mentioned set, documents (represented by the Document object) itself also have a series of elements and non-element collections, the most important of which is the all collection, which contains all the elements on the current Web page, which is the most basic way for scripting languages to access element objects. For more information about using the collection of element objects, see Scripting Elements and collections (scripting with Elements and collections)



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.