Because of the introduction of the DOM (Document Object model) concept, this API makes the HTML even more powerful, but some DHTML friends are still a little bit scratched, just because the current manual is not very scientific writing, is divided by letter, inconvenient to consult. In fact, the key to Dom is to master the relationship between nodes and nodes ( Between node and node, want to learn the DOM in DHTML do not look through all the properties and methods, you have the Three Kingdoms when the Zs "photographic memory" ability? No, then listen to me to analyze:
What Dom teaches us is a hierarchy that you can understand as a tree structure, just like our directory, a root directory, subdirectories under the root directory, and subdirectories under the subdirectory ...
Root node:
Dom refers to each object in the hierarchy as a node, an example of HTML Hypertext Markup Language: One root of the entire document is <HTML> It can be accessed using document.documentelement in the DOM, which is the root node of the entire node tree (root)
Child nodes:
In the general sense of the node, the root node below the largest child node is the main document area <body>, to access the body tag, in the script should write:
Document.body
Within the body area of all the text and HTML tags are document nodes, called text node, element node (or tag node), we know that HTML is only the text and then, no matter what kind of pages must be composed of these two nodes, can only be composed of these two nodes
The relationship between nodes:
The relationship between the nodes is also the most important part of the DOM, how to correctly refer to the node object, we must clearly understand the node tree each node description of each other, in DHTML, JavaScript script uses a set of methods and attributes of each node object to describe another node object.
An absolute reference to a node:
Returns the root node of a document
Document.documentelement
Returns the tab node that is being clicked in the current document
Document.activeelement
Returns the source node from which the mouse is moved
Event.fromelement
Returns the source node where the mouse is moved
Event.toelement
Returns the source node of the activation event
Event.srcelement
The relative reference of the node: (set node for current nodes)
Return parent Node
Node.parentnode
Node.parentelement
Returns a collection of child nodes (including text nodes and label nodes)
Node.childnodes
Return child label Node collection
Node.children
Returns a collection of child text nodes
Node.textnodes
Returns the first child node
Node.firstchild
Returns the last child node
Node.lastchild
Returns the same genus next node
Node.nextsibling
Returns the same last node
Node.previoussibling
The various operations of the node: (Set the current node to nodes)
New label node handle:
Document.createelement (Snode)//parameter is the node tag name to be added, example: Newnode=document.createelement ("div");
1, add the node:
Append child nodes:
Node.appendchild (onode)//onode new node handle for a living, example: Node.appendchild (NewNode)
Apply Label node
Node.applyelment (Onode,swhere)//onode A new node handle for a living, Swhere has two values: Outside/inside, added to the current node or inside
Insert Node
Inode.insertbefore ()
Node.insertadjacentelement ()
Node.replaceadjacenttext ()
2, modify the node:
Delete a node
Node.remove ()
Node.removechild ()
Node.removenode ()
Replacing nodes
Node.replacechild ()
Node.replacenode ()
Node.swapnode ()
2, Replication node:
Returns a replication Replication node reference
Node.clonenode (BALL)//ball is a Boolean value true/false whether to clone all child nodes of the node
3, node information
Whether to include a node
Node.contains ()
Whether there are child nodes
Node.haschildnodes ()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
