Easy to learn about JavaScript 18: DOM in JavaScript

Easy to learn about JavaScript 18: DOM in JavaScript
1 DOM Overview

DOM (Document Object Model) is an application interface (API) for HTML and XML ). DOM plans the entire page as a document at the node level.

DOM depicts a hierarchical node tree, which is run by developers to add, remove, and modify a part of the page. Every part of the HTML or XML page

Is a derivative of a node. With DOM, you can access all elements of HTML documents. When a webpage is loaded, the browser creates a Document Object Model for the page.

The DOM model is constructed as an object tree.

DOM is the W3C standard. DOM defines the criteria for accessing HTML and XML documents. "W3C Document Object Model (DOM) is neutral

Yu platform and language interfaces, which allow programs and scripts to dynamically access and update the content, structure, and style of a document ."

W3C DOM standards are divided into three different parts:

1. Core DOM-Standard Model for any structured document

2XML DOM-Standard Model for XML documents

3. html dom-Standard Model for HTML documents

2. DOM node tree and Node

(1) DOM Node

In DOM, everything is a node. DOM is the HTML of the node tree. All content in the HTML document is a node: the entire document is

One document node; each HTML element is an element node; the text in the HTML element is a text node; each HTML attribute is an attribute node; comment is a note

Release nodes. Let's take a look at the actual situation:

 

Block-level elements

 

(2) node parent and siblings

Nodes in the node tree have hierarchical relationships with each other. Terms such as parent, child, and sibling are used to describe these relationships. Parent node has child

Node. Sub-nodes of the same level are called siblings ).

1. In the node tree, the top node is called root)

2. Each node has a parent node, except the root node (it does not have a parent node)

3. A node can have any number of sub-nodes.

4. A compatriot is a node with the same parent node.

The following figure shows a part of the node tree and the relationship between nodes:

(3) node tree

Take a look at the DOM tree composed of the following code:

Level 1 title

From the preceding HTML:

 

The node does not have a parent node; it is the root node.

 

And the parent node is a node

The parent node of the text node "Level 1 title" is

Node

 

And:

 

A node has two subnodes: A node and a node.

 

A node has a subnode: Node

 

 

It is a sibling node and a subnode.

 

And:

 

The element is the first child node of the element.

 

The element is the last subnode of the element.

 

The element is the first child node of the element.

 

Element is

The last subnode of the element.

When an HTML document page is loaded, the browser automatically generates a tree structure to indicate the internal structure of the page. DOM calls this tree structure

A node tree composed of nodes. Node tree diagram:

Role of DOM

Through the programmable object model DOM, JavaScript has sufficient capabilities to create dynamic HTML.

(1) JavaScript DOM can change HTML elements in the page

This is an existing paragraph

<Script type = "text/javascript"> var para = document. createElement ("p"); // create an element node p tag var node = document. createTextNode ("this is the text of the new element added through DOM"); // create a text node para. appendChild (node); // append the text node var element = document to the p tag. getElementById ("div1"); // you can use the id attribute to find the div element. appendChild (para); // append a new element to the div element. </script>

The running result is:

(2) the JavaScript DOM can change the HTML content on the page.

Hello World!

<Script type = "text/javascript"> document. getElementById ("p1"). innerHTML = "New text! "; </Script>

The running result is:

(3) the JavaScript DOM can change the CSS style on the page.

Hello world!

Hello world!

<Script type = "text/javascript"> document. getElementById ("p2 "). style. color = "blue"; document. getElementById ("p2 "). style. fontFamily = "Arial"; document. getElementById ("p2 "). style. fontSize = "larger"; </script>

The running result is:

(4) JavaScript DOM can respond to events on the page

Click the button to executeDisplayDate ()Function.

Display Time Standard Time Button

 

<Script type = "text/javascript"> function displayDate () {document. getElementById ("demo"). innerHTML = Date () ;}</script>

The running result is:

 

This article explains why JavaScript has been involved. Here we will learn more complex things to operate on HTML elements and

CSS style, this will make the webpage dynamic, pull-down menu and seamless scrolling of images and other dynamic effects we can achieve. These are all to be learned later.

I will not talk more about things. I will summarize this article. If you want to see the effect, you can refer to: easily learn JavaScript 4: JS click the light bulb to light up

Or, the special webpage effects of turning off the lamp map out the functions of JS in HTML and DIV + CSS Practice 6: Add a navigation bar drop-down menu on the webpage of the management system.