Dom implementation in Javascript allows us to perform Dom operations on HTML and XML data through JavaScript code in Ajax, so as to dynamically modify and update pages and extract data.
Dom concepts
The Dom Document Object Model allows programs and scripts to dynamically access and update the content, structure, and style of documents.
DOM object tree
A page in the browser corresponds to an HTML document, so there is a corresponding html dom tree.
For example:
A page in the browser may process multiple XML documents, so there may be multiple Dom trees for XML.
Common nodes in the DOM object tree
In the DOM tree, the document content corresponds to many different types of nodes, all of which are node objects. The Node object has a nodetype attribute to determine the node type.
Interface |
Nodetype constant |
Nodetype Value |
Remarks |
Element |
Node. element_node |
1 |
Element Node (Label) for example: <body> <input> |
ATTR |
Node. attribute_node |
2 |
Attribute nodes (attributes) such as value attribute values in <input> |
Text |
Node. text_node |
3 |
Text node (text) for example: Hello word in <div> Hello word </div> |
Comment |
Node. comment_node |
8 |
Comment node (comment), comment information |
Document |
Node.doc ument_node |
9 |
The document root node, indicating the root of the entire document, does not correspond to any content in the document |
The development of Dom is closely related to the general trend of Web standardization. Only based on the correct semantic logic can Dom play its role correctly. Nowadays, correct semantic structure, performance, and content separation have all become basic requirements in web design. Therefore, in front-end development of web pages, the existence of Dom undoubtedly provides an excellent API for connection at the presentation layer, behavior layer, and even content layer, become an indispensable part of popular Ajax applications.