Easy Learning JavaScript 18: A simple DOM introduction to DOM programming learning

Source: Internet
Author: User

a DOM overview

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.