Explore DOM Document Object Model usage

This article describes the DOM Document Object Model. There are two types of DOM Document Object Models: HTMLDOM and XMLDOM. HTMLDOM is a special DOM. It only supports the getElementById () and getElementsByTagName () methods for query. Do not confuse IE's private all () method ), XMLDOM can be combined with XPathAPI for query based on powerful regular expressions.

DOM Document Object Model

DOM is the Document Object Model DocumentObjectModel). It was originally developed by W3C to solve the differences between different browsers in the browser war era, mainly the differences between IE and NetscapeNavigator.

There are two types of DOM Document Object Models: HTMLDOM and XMLDOM. HTMLDOM is a special DOM. It only supports the getElementById () and getElementsByTagName () methods for query. Do not confuse IE's private all () method ), XMLDOM can be combined with XPathAPI for query based on powerful regular expressions. HTML Dom is used in Ajax development. XMLDOM is not required if XML format data is not processed. The DOM Document Object Model mentioned below also refers to HTMLDOM.

In a simple and popular language, the DOM Document Object Model allows you to access and process standard component elements, style sheets, scripts, and etc. On the page. Over the years, programmers who want to create front-end Web applications have to use Java Applet, Flash, or ActiveX. Of course, these tools can still be used now, but the DOM-based browser gives Web developers the ability to create diverse and powerful Web-based applications, in addition, standard-based technologies are fully used.

The DOM document Object Model shows the entire HTML document as a tree-like structure in the memory. In the browser, there is only one such html dom tree, and its root node is the document object ), each element and attribute is a node on the tree. You can use JavaScript to access this DOM tree, traverse nodes on the tree, dynamically add or delete nodes on the tree, set or modify the style of a node, set or modify the values saved in a node, and so on. Any modifications made to the DOM tree through JavaScript will take effect immediately. JavaScript cannot control the time when the browser re-presents the DOM tree. Because re-rendering the DOM tree in the browser is a very time-consuming operation, we should minimize the number of such operations.

Suppose I dynamically create a div as a container, and the div contains five Dynamically Loaded img elements. If I write code in this order:

◆ Create a div and attach it to the document.

◆ Create five img. Each time you create an img, immediately attach it to the div and then attach it to the document ).

How many times have the browser re-rendered the DOM tree? Six times in total.

What if I write code in this order:

◆ Create a div,

◆ Create five img and attach them to the div.

◆ Attach the div to the document.

How many times have the browser re-rendered the DOM tree? Only once.

Obviously, the latter method has the least re-presentation times, so the execution efficiency is the best. This is the method recommended in AjaxinAction.

In addition, each node on the DOM tree is a very large object. To intuitively understand how large a DOM Document Object Model node is, you can use the DOM checker in Firefox to open a DOM node. The number of attributes will surprise you, in particular, the number of attributes in the style array. Therefore, when a dynamically created DOM node is no longer used, it must be released in time to set all references to null so that it is in an inaccessible state, so that the garbage collector can recycle it in time ). If you do not release unnecessary DOM nodes in time, memory leakage may occur after a period of time.

Finally, the innerHTML attribute is not the standard attribute of W3CDOM. This attribute was originally invented by IE, but it was very convenient for developers to use, and thus became a de facto standard. All other mainstream browsers also support this attribute, so you can use it with confidence. OuterHTML and innerText are only supported by IE. They should not be used when developing cross-browser Ajax applications.