JavaScript web pages-DOM and javascript-dom

JavaScript web pages-DOM and javascript-dom

I. Full name of DOM

Document Object Model)

Ii. What is DOM?

DOM is a programming interface and an API.
DOM is an API for HTML documents and XML documents. Just like JDBC is a set of APIS for databases.

Iii. Usage of DOM

DOM is used to access or operate node elements in HTML documents, XHTML documents, and XML documents.

Now, basically all browsers have implemented the DOM specification released by W3C, so these DOM APIs can be used in browsers.

DOM provides a script-friendly view of the webpage structure and content

DOM regards a webpage as a hierarchy tree composed of nodes.

DOM tree

The top node of each DOM tree is Document, which is at the upper layer of the HTML node.

A webpage is a collection of DOM nodes.

See figure 1.

Node Type

Webpage nodes are classified by category, mainly composed of element nodes and text nodes.

See figure 2.

Node features

Nodes can be used to navigate the node tree.

The following are common node features:

NodeValue is stored in the value of a node. It is only used by text nodes and attribute nodes (excluding elements)

NodeType node type, for example, it is DOCUMENT or TEXT, but it is represented by code

ChildNodes contains arrays of all subnodes under the node, arranged in the order that appears in the HTML code

The first subnode under the firstChild Node

The last subnode under the lastChild Node

Example

Document. getElementById ("id "). nodeValue; // obtain the plain text document under a node. getElementsByTagName ("body") [0]. childNodes [1]. lastChild; // The Last node of the second subnode under the body

Use DOM to change Element Content

First, remove all child nodes.

Create a new text node based on the new content

Finally, attach the newly created file subnode to the node.

Three methods are involved.

RemoveChidl () removes a subnode under the target node and passes in the child node to be removed.

CreateTextNode () creates a text node from a text string

AppendChildO () is added to the new node as the last subnode starts.

Var node = document. getElementById ("id"); // get the element while (node. firstChild) // delete all the subnodes under the element (here, determine whether the subnode exists and the existence is true) node. removeChild (node. firstChild) node. appendChild (document. createTextNode ("message") // Add new content to the element

Summary

Although innerHTML is not a World Wide Web standard, it can access all content stored in the element.

Document Object Model (DOM) provides a standardized mechanism for accessing and modifying webpage data.

The DOM view page is the Hierarchy Tree of associated nodes.

To use DOM instead of innerHTML to change the webpage content, you need to remove all the subnodes under the element and create and attach a new subnode containing the new content.

For more information about JavaScript browser-DOM, I will introduce JavaScript browser-CSS and DOM. If you are interested, click here to view details!

Articles you may be interested in:

• Jquery objects and javascript objects, I .e. DOM objects, convert each other
• Influence of JS, CSS, and img on DOMContentLoaded events
• Javascript method for getting the next node of dom
• Basic Javascript knowledge (3) BOM, DOM Summary
• Javascript Study Notes (3) BOM and DOM
• Use the js Math. random () function to generate random numbers between n and m.
• Use JS to dynamically create an html DOM element and display it
• Js sets document. domain for cross-domain attention Analysis
• Introduction to AngularJS html dom support
• How to convert html strings into jquery dom objects in javascript
• In javascript, how does random number math random generate a random number in a specified range?