parentNode
- What you get is your own father (direct relationship)
// Click on the child to hide the father
<script>
window.onload = function(){
var child = document.getElementById("child");
child.onclick = function(){
this.parentNode.style.display = "none";
}
}
</script>Brother node nextSibling previous Sibling
Next Sibling, next brother, ie 678 compatible.
NextElement Sibling, the next brother, is compatible with other browsers except ie678.
Previous Sibling, last brother, ie 678 compatible.
Previous Element Sibling, the last brother, is compatible with other browsers except ie678.
To be compatible, we can co-write |, note: you must write the normal browser first, then ie678.
<script>
window.onload = function () {
var box = document.getElementById("box");
var select = box.nextElementSibling || box.nextSibling;
select.style.backgroundColor = "pink";
var select2 = box.previousElementSibling || box.previousSibling ;
select2.style.backgroundColor = "yellow";
}
</script>
<body>
<div></div>
<div id="box"></div>
<div></div>
</body>Subnode
First Child's first child, ie 678
First ElementChild, First Child, Other Browsers
Compatible with VaR boy = someone. firstElementChild | | someone. firstChild;
Last Child's Last Child, ie 678
Last ElementChild Last Child, Other Browsers
Compatible with VaR boy = someone. lastElementChild | | someone. lastChild;
childNodes chose all the children. Note: Google Firefox and others will treat the change of profession as a child. All child nodes are traversed and element nodes are obtained by using nodeType = 1.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function()
{
var ul = document.getElementById("ul")
var childrens = ul.childNodes; //Choose all the children
alert(childrens.length); //The result is 7 because Google Firefox sees a change of profession as a child.
//Use nodeType == 1 to get element nodes
for(var i=0; i<childrens.length; i++)
{
if( childrens[i].nodeType == 1)
{
childrens[i].style.backgroundColor = "pink";
}
}
}
</script>
</head>
<body>
<ul id="ul">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>- Children selects all children (only element nodes). This is recommended to replace child Nodes. Note: ie 678 will contain annotation nodes, which should be avoided.
Create the node creatElement();
- Create a div element node: var div = document.creatElement("div");
Insert node appendChild () insertBefore ()
appendChild() adds a node to the end of the parent box.
InsertBefore (insert node, reference node) adds a node to the front of the reference node. Note: If the second parameter is null, the inserted node is placed at the end by default.
Remove node removeChild()
// Remove test from demo
var test = document.getElementById("test");
demo.removeChild(test);Clone Node ()
- In parentheses, you can follow the parameters. If it is true, you can copy it deeply. In addition to the copy node, you can also copy its children.
- If it is a shallow copy of false, only copy the original node, not its children.
Code examples
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var demo = document.getElementById("demo");
var childrens = demo.children; //Select all demo children
//Create Nodes
var firstdiv = document.createElement("div");
//Adding Nodes
demo.appendChild(firstdiv); //Add from the back
//Create Nodes
var test = document.createElement("div");
//Insert Node
demo.insertBefore(test, childrens[0]);
//Insert Before (insert node, reference node) is added to the front of the reference node.
//The demo.insertBefore(test,null) reference node is null, which is placed at the end of the box by default.
var test_1 = document.getElementById("test_1");
demo.removeChild(test_1); //Remove Nodes
var last = childrens[0].cloneNode(); //Clone node, clone the first child in demo.
demo.appendChild(last); //Insert the node to the end of demo
//Cloning a demo
demo.parentNode.appendChild(demo.cloneNode(true)); //Adding a child to my father is my brother.
}
</script>
</head>
<body>
<div id="demo">
<div id="test_1"></div>
<div id="test_2"></div>
</div>
</body>
</html>