Develop advanced tutorials Using Dojo's AJAX Applications, Part 4: DOM Queries and operations

The full name of the DOM is the Document Object model. It is an API for HTML and XML documents. It defines the logical structure of the document, as well as the way in which documents are accessed and manipulated. With the DOM, developers can navigate the document freely, and can add, update, and delete elements and content. Basically anything in the document can be accessed and manipulated through the DOM. This article details how to use the DOM base API and Dojo for DOM queries and operations. The Dojo version used is 1.4. The basic concepts of DOM are described below first.

Basic concepts of DOM

DOM is an API that is used for scripting languages such as JavaScript and VBScript. In the early days of the Internet, HTML pages were static. There is no way for developers to dynamically modify a page. The advent of DOM solves this problem. Dom gives a way to describe the structure of HTML documents and allows developers to modify the document structure with the APIs provided by the DOM. DOM is currently the recommended specification for the consortium. Mainstream browsers implement or partially implement the specification. The following is an introduction to the version history of the DOM specification.

Version history of the DOM specification

Since the advent of DOM, there has been a constant development and standardization of the Organization, so the current version is more recent, as shown below:

0:1996 years of DOM level, Netscape's Netscape Navigator 2.0 browser pioneered the scripting language of JavaScript. Developers can use JavaScript to manipulate elements on a page. The DOM at this point is called DOM level 0. It only supports the operation of forms, links, and images on the page.

Intermediate DOM: The Middle Dom (Intermediate DOM) refers to an intermediate version between DOM level 0 and DOM level 1. In this release, you can change the style sheet of the page through JavaScript. In addition, more elements on the page can be manipulated through the DOM.

DOM level 1:dom Level 1 is a DOM specification standard developed by the Consortium, released in 1998. The specification of the DOM Level 1 defines the basic way to access and manipulate elements in an HTML page.

DOM level 2:dom Level 2 increases the getElementById () method, Dom traversal, and scope, namespace, and CSS support based on DOM Level 1.

DOM-level 3:dom Level 3 adds methods and properties such as Adoptnode () and textcontent, document save and load, document validation, and XPath, based on DOM level 2.

This article will focus on the sections of DOM Level 1 and Level 2. The content of these sections is currently in good compatibility with different browsers, and is also commonly used. The basic elements in the DOM specification are highlighted below.

DOM Basic Elements

For basic elements in an HTML document, the DOM has an abstract interface that corresponds to it.

Document: The document interface is used to represent the entire HTML document. The access and manipulation of other elements and content in the document is based on this interface.

Document fragment (DocumentFragment): A document fragment is used to represent a part of the entire document tree.

Node: The node interface is used to represent a node in the HTML document tree. This is an abstract interface, and in the document tree there are subtypes of the interface, such as elements, attributes, and text nodes.

Node List (nodelist): A list of nodes represents an ordered set of nodes. It works like a java.util.List interface in Java. You can get a node in the collection through the ordinal of the node in the collection.

Named node mapping table (NAMEDNODEMAP): The Named node mapping table represents a collection of nodes that can be accessed by name. It works like a Java.util.Map interface in Java.

Element: An element is a seed type of a node and can contain child nodes and attributes.

Attribute (Attr): property is used to describe the characteristics of an element. It is not part of the document tree.

Text: text represents the textual content of elements and attributes.

Dom Exception (Domexception): A DOM exception is used to indicate an error condition when a DOM operation cannot be performed. A series of error conditions and error codes are defined in the DOM exception.

DOM Implementation (Domimplementation): A DOM implementation represents a specific implementation that corresponds to a DOM interface.

Note here that the nodes in the node list are dynamic and reflect the latest document structure. For example, a list of child nodes of an element is obtained through the DOM API, and if one of the child nodes is deleted, the node does not appear in the previous node list.

After introducing the basic concepts of DOM, here's how to use the DOM to query the current document tree.