HTML5 Knowledge Points: Dom programming

Source: Internet
Author: User

Dom is document The abbreviation for the object model, the Chinese name is the document object models.

DOM is a standard programming interface for working with HTML pages, and the DOM can be used by JavaScript to read and change the contents and structure of HTML.

front Big Three refers HTML, CSS, and JavaScript, where the most important part of JavaScript is DOM.

One: Why should we study What about DOM?

1,dom allows users to interact with Web page elements

For example, when I click on a button, pop up a dialog box and other actions.

2,dom can be used to do web games

For example, now the more popular Game of Warcraft, we can completely take JavaScript to manipulate the DOM to implement.

3,dom is an important basis for Ajax

For example, we get some data through Ajax that you want to display to the user, which requires DOM.

Two: That's how we explain it . Dom's

1, first we will explain what is DOM, that is, the previous Document Object model

DOM is a standard programming interface for working with HTML, and the DOM can be used by JavaScript to read and change the contents and structure of HTML.

2, will explain what the DOM tree

The hierarchy between the object and the object.

650) this.width=650; "src=" Https://s1.51cto.com/oss/201711/20/9b2cefac6d95d218dd34d021e183f503.png "title=" Picture 8.png "alt=" 9b2cefac6d95d218dd34d021e183f503.png "/>


3, will explain what is the DOM node

according to HTML DOM Standard, all content in an HTML document is a node:

the entire document is a document node

each HTML elements are ELEMENT nodes

Text within an HTML element is a text node

each HTML attributes are attribute nodes

Comment is a comment node

4, will explain what is event-driven

What is done and what events are executed.

5, will explain what is Level 2 dom

What are Level 1 DOM, Level 2 DOM, and Level 3 dom? How to achieve.

6, will explain what is the event flow

Will explain what is called event bubbling, what is called event capture, what functions can be implemented according to the characteristics of the event stream, and how to prevent the propagation of events.

650) this.width=650; "src=" Https://s5.51cto.com/oss/201711/20/e087b52a1bf878e0dcbcd2ce33eedabd.png "title=" Picture 9.png "alt=" E087b52a1bf878e0dcbcd2ce33eedabd.png "/>


7, will explain what is the event

The properties of an event object provide details about the event.

Three: Simulation Brush case

in the Web page, by JavaScript Operation DOM to simulate brush function, such as mouse down, drag in the screen, will form traces, then the whole process is in the simulation brush.

(End of full text)

Article source: Qian Feng HTML5

This article is from the "Wang Qinque" blog, make sure to keep this source http://wangqingkai.blog.51cto.com/9235701/1983544

HTML5 Knowledge Point: Dom programming

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.