The JavaScript document object model (DOM) summary (DOM)
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Adobe Dreamweaver JavaScript
Author: Peng Qiwang
Time to write: on April 26, 2020,
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
The host object: DOM object BOM object
A, JavaScript_DOM document object model (dom)
What is the 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
Operating a WEB page,
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
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
1. The 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
Var para=document. The createElement method (" p ");
If you need to & lt; P> Element to add text, you must first create a text node, this code creates a text node:
Var node=document. CreateTextNode (" it's a new paragraph, ");
2. The 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,
To & lt; P> Element append the text nodes: para. The appendChild (node);
Finally you must increase to an existing element the new element,
This code to find an existing element:
Var element=document. GetElementById (" div1 ");

3. 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 nodes, but part of the element node
- could be obtained by element node specified attribute node
- for example:
- element node. GetAttributeNode (" attribute name ");

Attention!!!!!! : we don't usually use attribute node
One, nodeName attribute: the name of the node is read-only,
1. Element node nodeName is the same as the tag name
2. An attribute node nodeName is the name of the attribute of the
3. The text node nodeName is always # text
4. Document node nodeName is always # document

Second, 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. An attribute node nodeValue is the value of the attribute

Three, the 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

Two, JavaScript_DOM node operation
1. Obtain 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 IE8 and below version
2. 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
3. Access to the parent node and brother
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
4. 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"
5. 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
6. Use CSS selectors queried
QuerySelector ()
QuerySelectorAll ()
- these two methods is done with the document object to invoke, two methods using the same, is passing a selector string as a parameter, method 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 () will return all eligible element,
7. The 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)
- the parent node. The insertBefore (new nodes, the old node)
Styles 3, JavaScript_DOM elements for
1. JS modified element styles: elements. Style. Style style name=value
Read: elements. Style. The style name
Through the style attribute set and read are inline style
- div element
Var box=document. GetElementById (" box ");
- obtain the element is an inline style button
Var btnInlineStyle=document. GetElementById (" btnInlineStyle ");
2. The elements for the current display style
Grammar: elements. CurrentStyle. The property name or elements. CurrentStyle [properties]
- currentStyle is the style of the display can be used to read the current element, if the current element is not set the style, the access to its default value, for example, if there is no set width, obtain the value of auto
Note:!!!!!! This property only supports IE, other browsers don't support the
- in other browsers can use
GetComputedStyle () the method to get the current element to display
This method is the method of the window, 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
3. Define a function, used to retrieve the current style of the specified element
Parameters:
1. The element to get the style of the element
2. The name need to get the style name
The function getStyle (element, name) {
//most browser
Return getComputedStyle (box, null). The width;
//IE to obtain element
The return element. CurrentStyle. Width
If (window. GetComputedStyle) {
Return getComputedStyle [name] (box, null);
} else {
The return element. CurrentStyle [name];
}
}
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull