For a long time, forget about the basics, and review the JavaScript nodes!

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!