The more experienced a programmer is, the easier it is to work, but do you still remember the road when you came? Let us review, those years we have learned the JS node knowledge, the road long its repair far XI, I will go up and down and quest!
Each component in anHTML Document is a node, depending on the DOM.
This is what the DOM provides:
The entire document is a document node
Each HTML tag is an element node
Text that is contained in an HTML element is a text node
Each HTML attribute is an attribute node
Comments belong to note nodes
First, how to get the node reference
1. old how to get node references
getElementById ()
Getelementbytagname ()
Getelementbyname ()
Disadvantage:
wasted memory logic is not strong
2. get a reference to a node by the node relationship property
Object . parentnode Get a reference to the parent node
Object . childNodes Gets the collection of child nodes
Object . firstchild Get the first child node
Object . LastChild Gets the first child node \
Object . nextSibling Get a reference to the next sibling node
Object . previoussibling Get a reference to the previous sibling node
Disadvantages :
compatibility is not good.
Second, node information ( attributes )
Node type node name node value
NodeType ( value ) nodeName nodevalue
Element node 1 label name NULL
Attribute Node 2 Property Name property value
Text node 3 #text text
Note Node 8 #comment The text of the comment
Document node 9 #document null
Node Operation:
First, create a node
1> Creating ELEMENT nodes
Document.createelement (" element tag name ");
2> Creating an attribute node
Document.createattribute (" attribute name ");
Object . Properties =" Property Value "
Object . SetAttribute ( property name , property value )
Object . getattribute ( property name , property value )
3> Creating a text node
Object . innerhtml= "";
document.createTextNode (" text ");
Second, append to the page
The parent object . appendchild ( appended object ) is inserted into the last
The parent object . InsertBefore ( the object to insert , the previous object ) is inserted into the last
Third, modify ( replace ) the node
The parent object . ReplaceChild ( the object to be modified , modified );
Iv. Deleting nodes
The parent object . RemoveChild ( deleted Objects )
If you decide to delete a node, it is best to also empty the memory object =null;
This article is from the "Mr.zhu-Technology Exchange" blog, please be sure to keep this source http://bjishu.blog.51cto.com/7481301/1672148
For a long time, forget about the basics, and review the JavaScript nodes!