Javascript中的节点

一，节点

DOM将所有的文档中的内容都定义为节点
根据不同的类型分为12种节点。
需要记住的有： 1 元素 2 属性 3 文本 8 注释 9 文档

	 // 节点属性 节点值 节点名 节点类型
	 var box1 = document.getElementById("box1");
	 // 获取节点集合
	 var nodeList = box1.childNodes;
	 // 获取不同的节点
	 var p = nodeList[1];
	 var text = nodeList[2];
	 var comment = nodeList[3];
	 var attr = box1.attributes[0];
	 var document = document;

    // 节点名
    console.log(p.nodeName);  // 元素的节点名 就是大写的标签名 tagName
    console.log(text.nodeName); // 文本的节点名 是 #text
    console.log(comment.nodeName); // 注释的节点名 是 #comment
    console.log(attr.nodeName); // 属性的节点名 是属性名 id
    console.log(document.nodeName); // 文档的节点名 是 #document

	// 节点值：
	console.log(p.nodeValue); // 元素没有节点值 
	console.log(text.nodeValue); // 文本的节点值就是文本内容
	console.log(comment.nodeValue); // 注释的节点值就是注释内容
	console.log(attr.nodeValue); // 属性的节点值就是属性值
	console.log(document.nodeValue); // 文档没有节点值

  // 节点类型
  console.log(p.nodeType); // 1
  console.log(text.nodeType); // 3
  console.log(comment.nodeType); // 8
  console.log(attr.nodeType); // 2
  console.log(document.nodeType); // 9

二，节点关系： 父子关系、兄弟关系

从父亲找儿子：

1 找所有儿子，所有节点集合 parent.childNodes
2 找所有元素儿子 ，所有的元素节点集合 parent.children
3 找大儿子，第一个子节点 parent.firstChild
4 找大元素儿子 ，第一个子元素parent.firstElementChild
5 找小儿子，最后一个子节点parent.lastChild
6 找小元素儿子，最后一个子元素 parent.lastElementChild

子找父：
parentNode

三，节点操作

创建节点

var p = document.createElement("p"); 

追加节点

  父元素.appendChild(子元素)
  父元素.append(字符串或节点)
  document.body.appendChild();
  document.body.append(p) 

删除节点

   父元素.removeChild(子元素);
   子元素.remove();
   setTimeout(function() {
       // document.body.removeChild(p)
       p.remove();
   }, 5000)

插入节点

父元素.insertBefore(子元素, 标杆元素) 
document.body.insertBefore(p, box1);

替换节点

父元素.replaceChild(新子元素，旧子元素)
document.body.replaceChild(p, box1);

克隆节点

var p1 = p.cloneNode(true); // 如果参数为true 表示克隆子元素 如果没有参数 表示只克隆自身
console.log(p1);