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 tree of nodes, where developers join, remove, and change portions of a page.
Every part of an HTML or XML page
is a derivative of a node.
Through the DOM. Access to all elements of an HTML document.
When the page is loaded. The browser creates a template for the document object of the page
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 criteria for visiting HTML and XML documents. "The Document Object Model (DOM) is neutral
interface to the platform and language, it agrees that programs and scripts dynamically access and update the content, structure, and style of the document.
”
The DOM standard is divided into 3 different parts:
1 Core DOM-Standard model for whatever 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. Gaze is a 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>
Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">
(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 a random number of sub-
4 compatriots are nodes that have the same parent node
The following picture shows a portion of the node tree. And the relationship between nodes:
Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">
(3) Node tree
Look at the following code consisting of the DOM tree:
<! 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 HTML document pages. The browser will actively generate a tree structure on its own. Used to represent the internal structure of a page. The DOM calls such a tree structure
Node tree that consists of nodes.
Node tree diagram:
Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">
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 execution 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 execution 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 execution is:
(4) JavaScript's Dom can react to events 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 execution is:
Some have already been involved in explaining why you are learning JavaScript. Here we will learn more complex things 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 up. Will not say more, this piece of knowledge to summarize.
If you want to see the effect can be a reference: easy to learn JavaScript four: JS Click on the light bulb to light
Or turn off the light of the page effects map JS in the HTML role and DIV+CSS real Operation six: the Department of Management web page to join the navigation bar drop-down menu.
Easy Learning JavaScript 18: A simple DOM introduction to DOM programming learning
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
