In fact, what Dom teaches us is a hierarchical structure. You can think of it as a tree structure. Just like our directory, a root directory contains subdirectories, there are also subdirectories under the subdirectory ......
Root Node:
Dom calls every object in the hierarchy a node. Taking HTML hypertext markup language as an example: the root of the entire document is <HTML>. You can use document.doc umentelement in domto access it, it is the root node of the entire node tree)
Subnode:
Generally, the largest subnode below the root node is the main document area <body>. To access the Body Tag, you should write the following in the script:
Document. Body
All text and HTML tags in the body area are document nodes, which are called text nodes and element nodes (or tag nodes) respectively. We all know that HTML is just text, no matter what the web page is, it must be composed of these two nodes, and it can only be composed of these two nodes.
Relationship between nodes:
The relationship between nodes is also one of the most important joints in Dom. To correctly reference a Node object, you must understand the description of each node in the node tree. In DHTML, the Javascript script uses a complete set of methods and attributes of each node object to describe another Node object.
Absolute reference of a node:
Return the root node of the document
Document.doc umentelement
Returns the tag node that is being attacked in the current document.
Document. activeelement
Back to the source node with the mouse removed
Event. fromelement
Back to the source node
Event. toelement
Returns the source node of the activation event.
Event. srcelement
Relative reference of a node: (set the current peer node to a node)
Back to parent node
Node. parentnode
Node. parentelement
Return the child node set (including text nodes and label nodes)
Node. childnodes
Returns a set of child tag nodes.
Node. Children
Returns a set of child text nodes.
Node. textnodes
Returns the first subnode.
Node. firstchild
Returns the last subnode.
Node. lastchild
Returns the same node
Node. nextsibling
Returns the same node.
Node. previussibling
Node operations: (set the current node to node)
Add a label node handle:
Document. createelement (snode) // The name of the node label to be added. For example, newnode = Document. createelement ("Div ");
1. Add nodes:
Append a subnode:
Node. appendchild (onode) // node handle newly added by onode, for example, node. appendchild (newnode)
Application label Node
Node. applyelment (onode, swhere) // node handle newly added by onode. swhere has two values: Outside/inside, which are added to the current node or inside.
Insert Node
Inode. insertbefore ()
Node. insertadjacentelement ()
Node. replaceadjacenttext ()
2. Modify nodes:
Delete a node
Node. Remove ()
Node. removechild ()
Node. removenode ()
Replace Node
Node. replaceChild ()
Node. replacenode ()
Node. swapnode ()
2. Copy nodes:
Return copy node reference
Node. clonenode (ball) // ball is a Boolean value. True/false indicates whether to clone all child nodes of the node.
3. node Information
Include a node?
Node. Contains ()
Indicates whether a subnode exists.
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
