DOM同一父元素下子元素关系及操作

//创建新的html元素 -appendChild() 这个方法是添加到父元素的子元素列表最后

//1.创建一个标签元素

var testdiv = document.createElement('div');

//2.创建一个文本节点

var textNode = document.createTextNode('我是新添加的第一个文本节点');

testdiv.appendChild(textNode);

//3.注意新建的元素必须添加到已有元素上，才能添加成功

document.getElementById('testAppend').appendChild(testdiv);

//创建新的html元素 -insertBefore()这个方法是添加到指定子元素之前

//params1: 新创建需要操作的元素

//params2: 需要添加在哪个元素之前，该元素起到一个标记位的作用(该已知元素必须存在，否则会报错)

var testdiv2 = document.createElement('div');

var textNode2 = document.createTextNode('我要放在最前面');

testdiv2.appendChild(textNode2);

document.getElementById('testAppend').insertBefore(testdiv2, testdiv1);

//移除已存在的元素

//语法: 父元素.removeChild(子元素)

var parent = document.getElementById('testAppend');

parent.removeChild(testdiv2);

//替换已存在元素

//语法:parent.replaceChild(替换后的节点，需要被替换的节点) 和insertChild一样，第二个参数都是起到标志位的作用

var testdiv5 = document.createElement('div');

var testNode5 = document.createTextNode('我是来替换第二个文本节点的');

testdiv5.appendChild(testNode5);

document.getElementById('testAppend').appendChild(testNode5);

document.getElementById('testAppend').replaceChild(testdiv5,testdiv1);

//同一个父元素下子元素的关系

var childNodes = document.getElementById('testAppend').childNodes;

console.log('childNodes:',childNodes);

var lastChild = document.getElementById('testAppend').lastChild;//该节点最后一个子节点

var firstChild = document.getElementById('testAppend').firstChild;//该节点第一个子节点

var middleNode = childNodes[1];

var previousNode = middleNode.previousSibling;//该子节点上一个子节点

var nextNode = middleNode.nextSibling;//该子节点下一个子节点

console.log('firstNode:',firstChild,'lastChild:',lastChild,'previousNode:',previousNode,'nextNode:',nextNode);

//节点复制

//cloneNode(boolean a);

//深拷贝，复制节点本身和所有子节点

var deepList = document.getElementById('testAppend').cloneNode(true);

console.log('length',deepList.childNodes.length);// 3

//浅拷贝，仅复制节点本身

var shallowList = document.getElementById('testAppend').cloneNode(false);

console.log('shallow  length',shallowList.childNodes.length);//0