JavaScript manipulating DOM nodes

DOM (Document Object model)

The Document Object model, or DOM, is the standard programming interface recommended by the Organization for the processing of extensible flag languages. On a Web page, objects that organize pages (or documents) are organized in a tree structure that represents the standard model for objects in a document called the DOM. The Document Object model dates back to the late 1990 's "browser Wars" between Microsoft and Netscape, which gave the browser powerful features in order to make life and death in JavaScript and JScript. Microsoft has added a number of proprietary things to Web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, making it impossible for many Web pages to be displayed using non-Microsoft platforms and browsers.　　Dom is the masterpiece of the time. The DOM is actually a document model that is described in an object-oriented manner. The DOM defines the objects that are required to represent and modify the document, the behavior and properties of those objects, and the relationships between those objects. You can think of the DOM as a tree representation of the data and structure on the page, although the page may not be implemented in this way. With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page. To change something on a page, JavaScript needs to get access to all the elements in the HTML document. This portal, along with the methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).

1. JS handles DOM events:

2. JS Operation DOM Node:

HTML DOM getElementById () method

HTML DOM Document Object

Definition and usage

The getElementById () method returns a reference to the first object that owns the specified ID.

Grammar

document.getElementById (ID)

Description

The HTML DOM defines a variety of methods for finding elements, with the exception of getElementById () and Getelementsbyname () and getElementsByTagName ().

However, if you need to find a particular element in the document, the most efficient way is getElementById ().

When manipulating a particular element of a document, it is best to give the element an id attribute, assign it a unique name (in the document), and then use that ID to find the element you want.

2.1 Modifying the DOM node:

Because the font is a container, use the. innerhtml= "",

The input form is not a container, with a. value= "".

The div contains the above 2 DOM nodes.

2.2 Adding a DOM node:

Insert using the InsertBefore method, and then insert a node para before the parent's son1.

Inserting a node toward the parent is inserted by default at the end:

The AppendChild method adds a node by default at the end of the parent.

Click Add DOM node multiple times:

2.3 Deleting a DOM node:

3, JS Modify the DOM node CSS style:

Above is just a color change example, we must learn to extrapolate.

JavaScript manipulating DOM nodes