Shulou(Shulou.com)06/03 Report--

This article is about sample analysis of DOM in html. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

a What is DOM?

DOM is a programming interface for HTML and XML documents. Instead of viewing html source code as a page in a browser window or as plain text in a text editor, it is another structured representation of a document. DOM parses all the nodes of a document into an object and provides properties and methods to describe them.

DOM is a W3C standard. It is divided into three parts:

Core DOM: A standard model for any structured document

XML DOM: A standard model for XML documents

HTML DOM: The standard model for HTML documents

DOM is not a programming language, it is a standard, a model, and it is relatively independent of programming languages. Programming languages can access and process documents according to this model.

Note: Because we mainly learn WEB programming, the DOM that will be mentioned in the next article refers to HTML DOM, and the DOM API used is also implemented in JavaScript scripting language.

Two visits to DOM

We know that each browser has a different implementation of JavaScript, so there will be some differences in their implementation of the DOM standard, but since they all follow the standard, they show different degrees of consistency. So we don't need to do anything special when using DOM. If we encounter differences (mainly in method names and parameters), we just need to use the relevant methods implemented by different browsers. In fact, their implementations follow a uniform standard.

DOM treats documents as tree structures:

The entire document is a document node

Each HTML tag is an element node

Text contained in HTML elements is text nodes

Each HTML attribute is an attribute node

Comments belong to comment nodes

Through this node tree, JavaScript can easily access and manipulate these nodes.

Three DOM node types

Each node object has a nodeType, nodeName and nodeValue attribute. Through the values of these attributes, we can obtain relevant information about the node:

| node type| nodeName Return| nodeValue Return|

| 1 | Element |element name| null |

| 2 | Attr |attribute name| attribute value|

| 3 | Text | #text |the contents of the node|

| 4 | CDATASection | #cdata-section |the contents of the node|

| 5 | EntityReference |entity reference name| null |

| 6 | Entity |entity name| null |

| 7 | ProcessingInstruction | target |the contents of the node|

| 8 | Comment | #comment |comment text|

| 9 | Document | #document | null |

| 10 | DocumentType |document type name| null |

| 11 | DocumentFragment |#document fragment| null |

| 12 | Notation |symbol name| null |

four DOM classification

Level 1 DOM

Level 1 DOM was proposed by the W3C in October 1998 and consists of two modules: DOM Core and DOM HTML. DOM Core maps XML-based document structures, allowing access to and manipulation of arbitrary parts of documents. DOM HTML extends the DOM core by adding HTML-specific objects and functions.

Secondary DOM

Level 2 DOM expands on Level 1 DOM by introducing several new DOM modules to handle new interface types:

DOM Views: Describes an interface for tracking various views of a document (before and after designing the document using CSS styles);

DOM events: describe the event interface;

DOM Styles: Description handles interfaces based on CSS styles;

DOM traversal and scoping: Describes interfaces for traversing and manipulating document trees;

Specially established learning Q-q-u-n ③ ④-③-Zero ①② Share learning methods and small details that need attention, exchange learning with each other, constantly update the latest tutorials and learning skills (from zero basis to WEB front-end project actual tutorials, learning tools, full-stack development learning routes and planning)

Three-level DOM

DOM 3 extends DOM further by introducing a uniform way to load and save documents and document validation methods. DOM3 includes a new module called DOM Load and Save. DOM Core is extended to support all of XML 1.0, including XML Infoset, XPath, and XML Base.

Thank you for reading! About "DOM example analysis in html" This article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.