DOM——节点操作，，，增删查改，复制

// 网页中的所有内容都是节点(标签、属性、文本、注释等)， 在DOM中,节点使用node来表示。
// HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
//一般地，节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个
// 基本属性。
// ●元素节点nodeType为1（主要操作）
// ●属性节点nodeType为2
// ●文本节点nodeType为3 (文本节点包含文字、空格、换行等)

// （1）父级节点
//node.parentNode
// ●parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
// ●如果指定的节点没有父节点则返回null
console.log(ldh.parentNode);

//（2）子节点
//子节点childNodes 所有的子节点包含元素节点文本节点等等
var shuxing = document.querySelector('.shuxing')
console.log(shuxing.childNodes);
//children获取所有的子元素节点,也是我们实际开发常用的
console.log(shuxing.children);
//获取第一个子元素节点、最后一个子元素节点
console.log(shuxing.children[0]);
console.log(shuxing.children[shuxing.children.length - 1]);

// （3）兄弟节点
//nextsibling 下一个兄弟节点包含元素节点或者文本节点等等
console.log(ldh.nextSibling);
console.log(ldh.previousSibling);
//nextElementSibling得到下一个兄弟元素节点
console.log(ldh.nextElementSibling);
console.log(ldh.previousElementSibling);

//（4）创建添加节点
var ul = document.querySelector('ul');
var li1 = document.createElement('li'); //创建元素节点
ul.appendChild(li1); //追加节点
var li2 = document.createElement('li');
ul.insertBefore(li2, ul.children[0]); //最前面添加

// （5）删除节点
var ul = document.querySelector('ul');
ul.removeChild(ul.children[0])

//(6)复制节点
// node.cloneNode();复制node
var ul = document.querySelector('ul');
var li3 = ul.children[0].cloneNode(); //node.cloneNode();    括号为空或者里面是false,浅拷贝,只复制标签不复制里面的内容
var li4 = ul.children[0].cloneNode(true); //node.cloneNode(true);   括号为true,深拷贝,复制标签,复制里面的内容
ul.appendChild(li3);
ul.appendChild(li4);