The JavaScript document object summary
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Adobe Dreamweaver JavaScript
Author: wen-jian tang
Time to write: on April 25, 2020,
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
What is the DOM?
DOM Document Object Model (DOM) is the English full name is the Document Object Model,
Documents: can say the whole HTML page,
Object: playing the web page in each part can be converted into objects,
Can model: to represent the relationship, such as & lt; Ul> In & lt; Li>
Model diagram:

Nodes:
Node is the basic part of the web page of each part of the web page can be referred to as a node
For example some tag a tag li, these can say is a node, but the types of nodes is
Different,
For example:
Document node that HTML, the document is the document node,
Element nodes: div is the element node, could be obtained by the method of the document element nodes,
Text nodes:
Not shipped in the HTML text nodes such as P what is inside the tag,
An attribute node:
Not a part of the child node is an element such as Id, class, etc.

NodeName:
This thing is just to read to read will not change anything,
Column: the console log (document. The nodeName);
NodeValue:
Element nodes nodeValue is undefined or null
Text node nodeValue is text itself
Attribute node nodeValue is the value of the attribute of the
NodeType property:
Read-only and returns the node type
Element type node type
1
elementProperty 2
Text 3
Note 8
Document 9
Several methods to obtain element node:
GetElementById () by the id attribute for 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
Through specific element node called
EtElementsByTagName ()
Method returns the tag name of the current node descendant node
.childnodes
Properties, said all child nodes of the current node
FirstChild
Properties, said the first child node of the current node
LastChild
Properties, said the last child node of the current node
Column:
Var input=box. GetElementsByTagName (" input ");
The console. The log (input);
Var nodes=box..childnodes;
Var nodes=box. FirstChild;
Var nodes=box. LastChild;
Through specific node calls:
ParentNode:
Properties, said the parent node of the current node
PreviousSibling:
Properties, said before a brother of the current node node
NextSibling:
Properties, said after a brother of the current node node
Settings, element object. The property name=new value
Example: element value="https://bbs.csdn.net/topics/hello"
InnerHTML:
In the HTML code, can be set in the JS
QuerySelector () :
To obtain an element
QuerySelectorAll () :
Access to multiple elements
Node changes:
Create a node
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)
For the style of the element:
1 currentStyle:
Grammar: elements. CurrentStyle property names, or elements. CurrentStyle [properties]
This can read the current style if not set is a auto, this can only be used in Internet explorer
GetComputedStyle () :
Column: var obj=getComputedStyle (for elements, null);
This method can be to use other browsers, but Internet explorer can not used, the following
Make two fusion methods of writing:


Explanation: write good conditions in an if statement if first can be used to return to the first, if not is the second, and then wrapped in a function,
GetComputedStyle () method with currentStyle properties are read-only attribute, cannot modify attributes, if need to modify the value of the attribute, can only use style properties
ClientHeight | | clientWidth:
These two methods is to obtain the style of the elements without unit including content area and padding, read-only don't change,
Column: the console log (" box. OffsetHeight="+ box. OffsetHeight);
The console. The log (" box. The offsetWidth="+ box. OffsetWidth);
The offsetParent:
Gets the current from the nearest location of the parent element if did not return to the body,
Var ele=box. The offsetParent;
The console. The log (ele);
The offsetLeft:
The current element corresponding to the positioning element horizontal offset
OffsetTop:
The current element corresponding to the positioning element of vertical offset
Column: the console log (" box. The offsetLeft="+ box. The offsetLeft);
ScrollWidth | | scrollHeight:
Get high rolling OuDeKuan,
Column: the console log (" wrap. ScrollWidth="+ wrap. ScrollWidth);
ScrollLeft | | scrollTop:
The horizontal and vertical scrolling distance
Column: the console log (" wrap. ScrollTop="+ Math. Round (wrap. ScrollTop));