JS access, INSERT, replace, create, delete node introduction

Accesses the list of all child nodes under the selected element node, the returned value can be considered an array, and he has the length property.
Grammar:
Elementnode.childnodes
Attention:
If the selected node has no child nodes, the property returns a NodeList that does not contain a node.

Attention:
1. IE full range, Firefox, Chrome, opera, safari compatibility issues
2. The whitespace between the nodes, in Firefox, Chrome, opera, Safari browser is a text node, so IE is 3, the other browser is 7,

Accessing the first and last items of a child node
TheFirstChild property returns the first child node of the ' ChildNodes ' array. If the selected node has no child nodes, the property returns NULL.
Grammar:
Node.firstchild
Note: The same effect as elementnode.childnodes[0].
Second, the LastChild property returns the last child node of the ' ChildNodes ' array. If the selected node has no child nodes, the property returns NULL.
Grammar:
Node.lastchild
Note: The same effect as elementnode.childnodes[elementnode.childnodes.length-1].
Note: We know that Internet Explorer ignores the empty text nodes that are generated between nodes, and other browsers do not. We can filter the child nodes by detecting the node type.

Accessing the parent node ParentNode
Gets the parent node of the specified node
Grammar:
Elementnode.parentnode
Note: There can be only one parent node.


To access the ancestor node:
ElementNode.parentNode.parentNode
Take a look at the following code:
<div id= "Text" >
<p>
ParentNode
<span id= "Con" > Get the parent node of the pointing node </span>
</p>
</div>
<script type= "Text/javascript" >
var mynode= document.getelementbyid ("con");
document.write (Mynode.parentNode.parentNode.nodeName);
</script>
Operation Result:
ParentNode Gets the parent node of the pointing node
Div
Note: Browser compatibility issues, the white space between Chrome, Firefox and other browser tags is also a text node.

Accessing sibling nodes
1. The NextSibling property returns the node immediately following a node (at the same tree level).
Grammar:
Nodeobject.nextsibling
Description: If there is no this node, the property returns NULL.
2. The PreviousSibling property returns the node immediately before a node (at the same tree level).
Grammar:
Nodeobject.previoussibling
Description: If there is no this node, the property returns NULL.
Note: Two properties get the node. Internet Explorer ignores white-space text nodes (for example, newline symbols) that are generated between nodes, and other browsers do not ignore them.

Insert Node appendchild ()
Adds a new child node after the list of the last child nodes of the specified node.
Grammar:
AppendChild (NewNode)
Parameters:
NewNode: Specifies the appended node.

Insert Node InsertBefore ()
The InsertBefore () method inserts a new child node before the existing child node.
Grammar:
InsertBefore (Newnode,node);
Parameters:
NewNode: The new node to be inserted.
Node: Specifies that nodes are inserted before this node.

Delete Node removechild ()
The RemoveChild () method removes a node from the list of child nodes. If the deletion succeeds, this method returns the node that was deleted, such as failure, and returns NULL.
Grammar:
Nodeobject.removechild (node)
Parameters:
Node: required, specify the node that needs to be deleted.

Replace element node ReplaceChild ()
ReplaceChild implements the substitution of child nodes (objects). Returns a reference to the object being replaced.
Grammar:
Node.replacechild (newnode,oldnew)
Parameters:
NewNode: Required to replace the Oldnew object.
Oldnew: Required, object replaced by NewNode.

creating ELEMENT Nodes createelement
The CreateElement () method creates an element node. This method can return an Element object.
Grammar:
document.createelement (tagName)
Parameters:
TagName: A string value that is used to indicate the type of element being created.
Note: To be used in conjunction with the appendchild () or InsertBefore () method, the element is displayed in the page.
Let's create a button with the following code:
<script type= "Text/javascript" >
var body = document.body;
var input = document.createelement ("input");
Input.type = "button";
Input.value = "Create a button";
Body.appendchild (input);
</script>
Effect: In an HTML document, create a button.
We can also use the setattribute to set the property, the code is as follows:
<script type= "Text/javascript" >
var body= document.body;
var btn = document.createelement ("input");
Btn.setattribute ("type", "text");
Btn.setattribute ("name", "Q");
Btn.setattribute ("value", "Use SetAttribute");
Btn.setattribute ("" Javascript:alert (' This is a text! ');
Body.appendchild (BTN);
</script>
Effect: In an HTML document, create a text box that uses setattribute to set the property value. When you click on this text box, the dialog box "This is a text!" pops up.

Create a text node createTextNode
The createTextNode () method creates a new text node and returns the newly created textual node.
Grammar:
document.createTextNode (data)
Parameters:
Data: A string value that specifies the text for this node.

JS access, INSERT, replace, create, delete node introduction