1. Background
What is the DOM? Simply put, DOM content of a document is a set of abstract and conceptual approach in the real world, people called 'the world's object model' are not unfamiliar, for example, when using the 'car', 'house' and when the 'tree' and other terms to refer to things in the environment of everyday life, we can know each other a hundred percent sure of what we say is that this is because people in terms of these things represent has the same perception. So, when people say "car parked in the garage," it can be concluded that they will not be understood as "bird locked up in a closet," our "world object model" can be used to describe things do not enter an objective reality, but also It can be described with abstraction. For example, suppose I wanted to ask someone, but I answer given is "left third houses", the answer is no sense depends on that person able to understand the "left" and "third" means. If he will not or can not tell the number of the number of left and right, regardless of whether he understood these concepts, my answer to him, there will not be any help. In the real world, it is because we have a basic consensus on abstract "world object model," people can use very simple words to express complex meanings and get each other's understanding. The DOM is defined by the W3C standards developed, defined as "a system platform and programming language independent interface, programs and scripts can be accessed through this interface and dynamically modify the content of the document`, structure and style. "
2. Knowledge analysis
2.1. What is the node
The term network node is a term, represents a connecting point in the network. It is a network composed of a set number of nodes.
In the real world, everything is made of atoms. Atomic node is the real world. However, the same atom may be further broken down into finer subatomic particles. The node is also subatomic particles.
DOM is the same situation. Documentation is a collection of nodes consisting of, but this time the node is a document tree branches and leaves only.
There are many different types of nodes in the DOM. Like atom contains subatomic particles as there are many types of DOM nodes contain other types of nodes. Next we take a look at three of them: element nodes, text nodes and attribute nodes.
2.2. Element node
Atom is in the DOM element node.
Like we're seeing this page, write us at the time, it will be used such as <body>, <head>, <p> element. If the documents on the Web likened to a building, then the building element is constructed of brick, the layout of these elements in a document forming the structure of the document. Elements can contain other elements in the page page we have seen, the contents are contained in the interior of a <section> element. The only element not included in the only other element is the '<html>', he, and our root element node of the tree, all the other elements are included in the '<html>' in.
Section of the page tree node:
2.3 The text node
Element node is only a node type. If a document is completely blank there are some elements that make up, he will have a structure, but this document will not contain any content itself.
In our home page ppt, '<p>' element contains the text 'share of people: Liu Hongli'. He is a text node. In the html document, the text node is always contained within an element node.
2.4. Attribute node
Attribute node is used to make a more particular description of the elements. For example, almost all of the elements have a title attribute, and we can use this property to something contained in the element in the make accurate description: '<p title = "a gentle reminder"> It is with a reminder of p tag </ p> '
In the DOM, title = "a gentle reminder" is a property node. Because the properties are always placed in the start tag, the attribute node is always contained in the element node. Not all labels are included with the property, but all of the attributes are elements included.
Elements of composition:
2.5. Common DOM manipulation
Gets DOM
Id attribute matching method by using the getElementById element () to access the element node, element nodes to operate
TagName element matching method by using the getElementsByTagName () to access the element node, element nodes to operate
ClassName element matching method by using getElementsByClassName () to access the element node, element nodes to operate
It is noteworthy that, getElementsByTagName () and getElementsByClassName () These two methods because of its access node is possible for the complex attributes, so get would be a form of an array of elements to reflect the node set out, we can It determines the type of the print obtained by the DOM node .
DOM events
--- onclick event is executed when the user clicks
--- onload event is executed when the user enters
onunload event --- execution when the user leaves
--- onmouseover event is executed when the user's mouse pointer moves
--- onmouseout event is executed when the user's mouse pointer out
--- onmousedown event is executed when the user pressed the mouse
--- onmouseup event is executed when the user's mouse release
--- onblur event occurs when an object loses focus
--- onchange event occurs when the value of an object is changed domain
button event --- property returns an integer that indicates when the event is triggered which mouse button is clicked.