One, the DOM document object model (DOM)
DOM
- the DOM, the full name of the Document Object Model Document Object Model (DOM)
- through the DOM in JS to manipulate HTML document, as long as the understanding of DOM can follow one's inclinations of the WEB page operation,
The document
- the document representation is the whole HTML pages document
Object
- object representation transform every parts of the web pages are to an object
Model
- use the model to represent the object, the relationship between the object so we facilitate access to

Second, the DOM node
/*
Nodes:
- Node, the Node is constitute the most basic part of our web page, the page each part can be referred to as a Node
- such as: HTML tags, attributes, such as text, notes, the entire document is a node
- although are nodes, but in fact their specific type is different
- such as: label we called element node, called the attribute node, text, called a text node, a document called the document node
- node types, properties and methods is different also,

Node, the Node - constitute the most basic unit of the HTML document,
Common node is divided into four categories:
- a document node: the entire HTML document
- element node: HTML tags in HTML document
- an attribute node: attribute of the element
- text node: HTML tags in the text content

Node's properties: name nodeType nodeName node type value nodeValue node
*/
/*
A document node (document)
- document, document node represents the entire HTML document, all the nodes in a web page are its child nodes,
- document object attributes of the object as a window, we don't have to get can directly use the
- through which we can look for the node object within the entire document access, and can create all kinds of the node object through the object
*/
/*
Element node (Element)
- labels are in HTML element node, a node, this is also our most commonly used
- all the tags in the browser page will be converted to an element node, we could be obtained by the method of document
Element nodes,
- such as:
- the document. The getElementById ()
- according to the id attribute value for an element node object,
*/
/*
Text node (Text)
- text node represents outside the text content of HTML tags, arbitrary HTML text is a text node,,
- it can include literal interpretation of plain text content
- a text node is generally as the child nodes of the element node being
- get the text nodes, the general first to get the element node, through the element node for a text node
- for example:
- element node. FirstChild;
- element node for the first child, generally for a text node
*/
/*
An attribute node (Attr)
- an attribute node said is an attribute of the tag, to note here is that an attribute node is not the child nodes of the element node,
But part of the element node
- could be obtained by element node specified attribute node
- for example:
- element node. GetAttributeNode (" attribute name ");
- note: is the getAttributeNode (returning an attribute node), not the getAttribute (return the value of the attribute)
Example: & lt; Div id="box" & gt;
<script>
Var id1=document. GetElementById (" box "). The getAttributeNode (" id ");
The console. The log (id1);//id="box" returns the attribute node
Var id2=document. GetElementById (" box "). The getAttribute (" id ");
The console. The log (id2);//box return the value of the attribute
</script>
*/
/*
NodeName attribute: the name of the node is read-only,
1, element node nodeName is the same as the tag name
2, the attribute node nodeName is the name of the attribute
# 3, the node nodeName is always text
# 4, document node nodeName is always the document

NodeValue properties: the value of the node
1, the element node nodeValue is undefined or null
2, the text node nodeValue is text itself
3, the attribute node nodeValue is the value of the attribute

NodeType property: the type of node, it is read-only, the following several node type:
Element type node type
1
elementProperty 2
Text 3
Note 8
Document 9
*/

Three, the operation of the DOM node
/* get element node
Through the document object call
- getElementById () through the id attribute access to an element node object
- the getElementsByTagName () through the tag name for a group of element node object
- getElementsByName () by the name attribute to obtain a set of element node objects
- getElementsByClassName () by the class name for a group of element node object, this method does not support the IE and the following version
*/
/* gets the child nodes of the element node
Through specific element node called
The getElementsByTagName ()
- method that returns the tag name of the current node descendant node
-.childnodes
- property, said all child nodes of the current node
- firstChild
- property, said the first child node of the current node
- lastChild
- property, said the last child node of the current node
*/
/* for parent and siblings
Through specific node called
- parentNode
- property, said the parent node of the current node
- previousSibling
- property, said before a brother of the current node node
- nextSibling
- property, said after a brother of the current node node
*/
/* the attribute of element node
? Access: element object. The property name
Example: value
element.
element. The idElement. The className
? Settings, element object. The property name=new value
Example: element value="https://bbs.csdn.net/topics/hello"
Element. The id="id01
"Element. The className="newClass"

Other properties
NodeValue
- a text node can nodeValue properties to get and set the contents of a text node
InnerHTML
- element nodes through this property to get and set the tag within the HTML code
*/
/* using CSS selectors for query
QuerySelector ()
QuerySelectorAll ()
- these two methods is done with the document object to invoke, two methods using the same, it is passed a selector string as
As a parameter, the method will automatically according to the selector string to find elements in web pages,
- different places is querySelector () returns only to find the first element, and querySelectorAll () returns the
Have qualified element,
*/
/* node changes
Modify here we mainly refers to the operation of the element node
? Create a node
- the document. The createElement method (" tag ")
? Delete node
- the parent node. RemoveChild (child nodes)
? Replace the node
- the parent node. The replaceChild (new nodes, the old node)
? Insert the node
- the parent node. The appendChild (child nodes) add a child node
- the parent node. The insertBefore (new nodes, the old node) in a specified before you insert a child node,
*/

Four, DOM access element style
1, in IE to get the current to display an element style
Grammar: elements. CurrentStyle. The property name or elements. CurrentStyle [properties]
Description: currentStyle is the style of the display can be used to read the current element, if the current element does not set the style,
Access to its default value, for example, if there is no set width, access to the value of the auto
Note:!!!!!! This property only supports IE, other browsers don't support the
2, in other browsers to elements after the current display style
In other browsers by getComputedStyle () the method to get the display for the current element window of this method is
Method, can directly use the
Parameter description:
1. Need to get the style element
2. A pseudo element can pass the general pass null
Note: this method returns an object, object encapsulates the current element in the style of the corresponding

Var obj=getComputedStyle (element, null);//use of the method shows that
Getting elements display style:
Obj. The property name or obj [" attribute name "]
If the style is not set, may be obtain the real value, rather than the default value,
For example, if there is no set width, access to the value of 1200 px element (actual value)
Note:!!!!!! This method does not support IE8 and under browser

Note: getComputedStyle () method with currentStyle properties are read-only attribute, cannot modify attributes, if you need to repair the
Change the value of the attribute, can only use style properties

Five, DOM element properties and methods
/*
Element for each property and methodThe following properties and methods can be used for all HTML elements:
Property/method description
Element. The accessKey set shortcuts or return element,
Element. The appendChild () to the element, add a new child node as the last child node of
Element. The attributes returned NamedNodeMap element properties,
Element. The child nodes in the NodeList.childnodes back element, the
Element. The className sets or returns the class attribute of the element,
Element. ClientHeight return to highly visible element,
Element. ClientWidth return elements visible width,
Element. The cloneNode () cloning element,
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull