Home > Developer > JavaScript
The DOM (Document Object model) is an application interface (API) for HTML and XML. The DOM will plan the entire page into a document composed of node hierarchies.
The DOM depicts a hierarchical node tree that runs a developer to add, remove, and modify portions of the page. Each part of an HTML or XML page
is a derivative of a node. Through the DOM, you can access all the elements of an HTML document. When a Web page is loaded, the browser creates a Document object
Type, the DOM model is constructed as a tree of objects.
Dom is the standard of the World Wide Web Consortium. The DOM defines the standard for accessing HTML and XML documents. "The Document Object Model (DOM) is neutral
interface to platforms and languages that allow programs and scripts to dynamically access and update the content, structure, and style of a document. ”
The DOM standard is divided into 3 different parts:
1 Core DOM-a standard model for any structured document
2XML DOM-A standard model for XML documents
3HTML DOM-A standard model for HTML documents
Two DOM node tree and node
(1) DOM node
In the DOM, all things are nodes. The DOM is the HTML that is considered a node tree. All content in an HTML document is a node: the entire document is
A document node; Each HTML element is an element node; text within an HTML element is a text node; Each HTML attribute is an attribute node; note
Release nodes. So let's take a look at the actual:
<span style= "FONT-SIZE:18PX;" ><!--div Tags--><div id= "test" > block-level elements <div></span>
(2) node parent, son and sibling
Nodes in the node tree have hierarchical relationships with each other. Terms such as the parent, Son (Child), and fellow (sibling) are used to describe these relationships. Parent node has child
Node. Child nodes of a sibling are called siblings (brothers or sisters).
1 in the node tree, the top node is called root (root)
2 Each node has a parent node, except the root (it has no parent node)
31 nodes can have any number of sub-
4 compatriots are nodes that have the same parent node
The following image shows part of the node tree and the relationship between nodes:
(3) Node tree
Look at the following code that makes up the DOM tree:
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">From the HTML above:
The
The parent node of the text node "level header" is the
And:
The <title> node also has a child node: The text node "level header"
And:
<body> element is the last child node of the
<a> element is the last child node of the <body> element
When loading an HTML document page, the browser automatically generates a tree structure that represents the internal structure of the page. The DOM calls this tree structure the
Node tree that consists of nodes. Node tree diagram:
The role of the three DOM
With the programmable object model Dom,javascript, you get enough power to create dynamic HTML.
(1) JavaScript's DOM can change HTML elements in a page
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">The result of the operation is:
(2) JavaScript's DOM can change HTML content in a page
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">The result of the operation is:
(3) JavaScript dom can change the CSS style in the page
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">The result of the operation is:
(4) JavaScript Dom can react to events in a page
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">The result of the operation is:
When it comes to explaining why you're learning JavaScript, we'll learn something more complicated to manipulate HTML elements and
CSS style, this will make the Web page dynamic, drop-down menus and pictures seamless scrolling and other dynamics we can achieve. These are the things we need to learn later.
Things, and then no longer say, this piece of knowledge summed up. If you want to see the results can be consulted: easy to learn JavaScript four: JS Click on the light bulb to light
or turn off this lamp page effects map JS in the HTML function and DIV+CSS real operation six: Management Department Web page Add navigation bar drop-down menu.
Easy Learning JavaScript 18: Introduction to the DOM of JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
