In-depth analysis of DOM Document Object Models

This article describes the DOM Document Object Model (DOM), which is generally referred to as DOM. It is an interface for intercommunication between website content and JavaScript. The DOM interface is used to access, traverse, and control HTML and XML documents.

DOM Document Object Model

The Document Object Model (DOM) is an interface for intercommunication between website content and JavaScript. When JavaScript becomes the most commonly used language, JavaScript and DOM document object models are usually considered as independent entities. The DOM interface is used to access, traverse, and control HTML and XML documents.

Below are some important knowledge about the DOM Document Object Model:

◆ The window object is a global object. You only need to use "window" to access it. The Window object contains all your JavaScript code to be executed. Just as all objects contain attributes and methods.

An attribute is a variable stored in an object. All the variables created on the web page will become the properties of the window object.

The method is the function stored in the object. When all functions are stored in window objects, you can use 'Methods 'to reference them.

◆ Relative to the Web document structure, the DOM Document Object Model creates a hierarchy consisting of nodes. DOM nodes have many different types, the most important of which are 'element', 'text', and 'document.

The 'element' node indicates the elements in the page. Therefore, if you have a paragraph Element ('<p>') in the page, you can access it through the DOM node.
The 'text' node indicates all the Text in the page (in the element), so if there is some Text content in the section of the page, you can access it through the DOM node.
The 'document' node indicates the entire Document. (It is the root node of the DOM tree)

Note that the element attribute is the DOM Node itself.

◆ Different Layout engines vary in the implementation of DOM Document Object Model Standards. For example, the FireFox browser that uses the Gecko Layout Engine can perform well (but it is not exactly the same as the W3C Specification ), however, Internet Explorer using the Trident engine is well known for its many bugs and incomplete DOM Document Object Model Standards. This is a major pain point in the front-end development field.