JS中节点&节点之间的关系&DOM增删改查

元素节点：元素标签

• nodeType:1
• nodeName: 大写标签名
• nodeValue: null

文本节点：

• nodeType:3
• nodeName:'#text'
• nodeValue:文本的内容

注释节点：

• nodeType:8
• nodeName:#comment
• nodeValue:注释的内容

文档节点：document

• nodeType:9
• nodeName:#document
• nodeValue:null

节点关系属性：

• parentNode: 获取当前节点的父节点
• childNodes：获取当前所有的子节点
• children: 获取当前元素子节点
• previousSibling: 获取上一个哥哥节点
• previousElementSibling: 获取上一个哥哥元素节点
• nextSibling: 获取下一个兄弟节点
• nextElementSibling: 获取当前节点的最后一个元素兄弟节点
• firstChild: 获取当前元素下面的第一个子节点
• lastChild: 取当前节点下面的最后一个字节点
• firstElementChild: 获取当前节点下面的第一个元素字节点
• lastElementChild：取当前节点下面的最后一个元素子节点

DOM增删改查

• 创建一个元素：document.createElement("标签");
• 创建一个文本节点：document.createTextNode("文字");
• appendChild：在容器末尾追加元素,"容器.appendChild(追加的元素)"
• inserBefore: 在一个元素的前面插入一个元素,把newEle插入到oldEle的前面,"容器.insertBefore(newEle,odlEle)"
• removeChild():移除容器中的某个元素， "容器.removeChild(ele)";
  case:document.body.removeChild(box2);
• 克隆元素或者节点：
  cloneNode()只克隆标签（浅克隆）：
  let box3=box1.cloneNode(false);
  cloneNode（true）深克隆，把里面所有的结构内容都克隆了一份：
  let box2=box1.cloneNode(true);