The DOM is separated into 3 different parts / levels:
- Core DOM – standard model for any structured document
- XML DOM – standard model for XML documents
- HTML DOM – standard model for HTML documents
The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents like HTML and XML:
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document”.
What is the XML DOM?
The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.
What is the HTML DOM?
The HTML DOM is:
- A standard object model for HTML
- A standard programming interface for HTML
- Platform- and language-independent
- A W3C standard
The HTML DOM defines the objects and properties of all HTML elements, and the methods(interface) to access them. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Difference between Static vs. Dynamic HTML
Static HTML means when we put HTML elements (images, paragraphs etc.) in a specific order in the source code. The browser always showed all elements in this order. styling and Positioning was done by tables, div’s and such aids. If we wanted to change the positioning or order of the elements, we had to again write the HTML.
DHTML gives a way to re-organize our pages on the fly. we can take some elements out of the natural flow of the page, put them somewhere and change its position again and again by clicking a link.
The natural flow of the page is the page as the browser shows it one by one and displays them in the best possible way from the beginning to the end of the HTML document.
Now take an image, and put it somewhere on the page without regard to this natural flow. We can force the image to be in the extreme upper left corner of the page, while the rest of the content is still distributed by the natural flow.
Working of DHTML
Dynamic HTML gives authors creative control so they can manipulate any page element and change styles, content and position at any time. It provides a more dynamic experience on web pages, making them more like dynamic applications and less like static content. Dynamic HTML presents richly formatted pages and lets you interact with the content on those pages without having to download additional content from the server. it means that a page can respond immediately to user actions, such as a mouse click, without having to retrieve an entire new page from the server.
We discuss the three important components of Dynamic HTML authoring:
Positioning – precisely placing blocks of content on the page and, moving these blocks around.
Style modifications done by altering the look and display of content on the page.
Event handling is how to relate user events to changes in style and position
Key features of DHTML
Key features of Dynamic HTML include these:
- Document Object Model (DOM). Dynamic HTML provides a comprehensive object model for HTML. This model exposes all page elements as objects. Changing their attributes or applying methods to them at any time can easily manipulate these objects. Dynamic HTML also provides full support for keyboard and mouse events on all page elements. Support for the Document Object Model enables the following:
- Dynamic content. Text or graphics can be added, deleted, or modified on the fly. For example, a Web page can display an updated headline, without refreshing the page. The text surrounding the headline will reflow automatically.
- Dynamic styles. Internet Explorer 4.0 fully supports Cascading Style Sheets (CSS). As such, any CSS attribute, including color and font, can be updated without a server round-trip. For instance, text can change color or size when a mouse pointer passes over it. Multimedia filters and transition effects can be applied to HTML elements simply by adding the filter CSS attribute.
- Absolute positioning. CSS positioning coordinates for existing page content can be updated at any time to create animated effects, without reloading the page.
- Data Binding. Data-driven application front ends can be built that present, manipulate (e.g., sort, filter), and update data on the client without numerous round-trips to the server.
- Scriptlets. A scriptlet is a Web page, authored with Dynamic HTML, which content providers can use as a component in their Web applications. With scriptlets, content providers can author content once, then easily reuse the content in other Web pages or applications.
DHTML is a combination of three existing technologies meshed together by the Document Object Model (DOM):
1. HTML – For creating different page elements like text,image links.
2. CSS – Cascading Style Sheets allows authors and users to attach style (e.g., fonts, spacing,) to structured documents by separating content of documents and the presentation style of documents. CSS simplifies site maintenance and Web authoring .