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