Html5 knowledge point: DOM programming, html5 knowledge point dom
DOM is the abbreviation of Document Object Model, and the Chinese name is the Document Object Model.
DOM is a standard programming interface for processing HTML pages. DOM can be used by JavaScript to read and change HTML content and structure.
The front-end three parts refer to HTML, CSS, and JavaScript. The most important part of JavaScript is DOM.
I. Why should we learn DOM?
1. DOM allows users to interact with webpage Elements
For example, when I click a button, a dialog box is displayed.
2. DOM can be used for web games.
For example, we can use JavaScript to operate DOM in the popular World of Warcraft games.
3. DOM is an important foundation of ajax.
For example, we get some data through ajax, and you need to use DOM to display it to users.
II. This is how we explain DOM.
1. First, we will explain what DOM is, which is the object model of the previous document.
DOM is a standard programming interface for processing HTML. DOM can be used by JavaScript to read and change the content and structure of HTML.
2. What is the DOM tree?
The hierarchy between objects.
3. What is a DOM node?
According to W3C html dom standards, all content in HTML documents is node:
The entire document is a document Node
Each HTML element is an element node.
The text in the HTML element is a text node.
Each HTML attribute is an attribute node.
Annotation is a comment node.
4. What is event-driven?
That is, what operations are performed and what events are executed.
5. What is Level 2 DOM?
What are level 1 DOM, level 2 DOM, and level 3 DOM? How to implement it.
6. What is event stream?
It will explain what is event bubbling, what is event capture, what functions can be implemented based on the characteristics of the event stream, and how to prevent the spread of events.
7. What is Event?
The attribute of the Event object provides Event details.
3. Simulated paint case
On a webpage, you can use JavaScript to operate the DOM to simulate the paint brush function. For example, if you drag the mouse to the screen, a trace is formed. The entire process is to simulate the paint brush.
(Full text)
Source: qianfeng html5