节点操作及案例完整版（内含解析）_在所有节点下和在某个节点下的代码区别-CSDN博客

文本内容颜色标注含义：绿色：内容需要了解；红色：内容重要需要熟记，因编写内容时会遇到；

天蓝色：常用的几种案例；深蓝色：在现在的市场上运用到的较少；粗黑：需要留意这种写法或者是使用方式；橙色：常用的是与前面几种案例合并；

节点至少拥有三个属性：nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值），元素节点：nodeType：1，属性节点：nodeType：2，文本节点：nodeType:3

1，node.parentNode,返回某节点的父节点，返回最近一个父节点,如果没有父节点返回null。

<div class="demo">
	<div class="box"></div>
</div>
<script>
	var box = document.querySelector(".box");
	console.log(box.parentNode);//返回父级节点
</script>

2，childNodes返回包含指定节点的子节点的集合，返回所有子节点，包括文本节点，元素节点。

<div class="demo">
	<div class="box">文本节点</div>
</div>
<script>
	 var demo = document.querySelector(".demo");
	 console.log(demo.childNodes);
console.log(demo.childNodes[0].nodeType);
</script>

3， children 只返回所有的子元素节点，其余节点不返回（例如：文本节点）。

<div class="demo">
		   <div class="box">文本节点</div>
		   <div class="box">文本节点</div>
		   <div class="box">文本节点</div>
</div>
<script>
	     var demo = document.querySelector(".demo");
		 console.log(demo.children);
</script>

4， firstChild 返回第一个子节点，找不到返回null，包含所有节点。

<script>
	     var demo = document.querySelector(".demo");
		 console.log(demo.firstChild);
</script>

5，firstChild 返回最后一个子节点，找不到返回null，包含所有节点。

<script>
	     var demo = document.querySelector(".demo");
		 console.log(demo.lastChild);
</script>

6， firstElementChild 返回第一个子元素节点，找不到返回null。Ie9以上支持。

<script>
	     var demo = document.querySelector(".demo");
		 console.log(demo.firstElementChild);
</script>

7，lastElementChild 返回最后一个子元素节点，找不到返回null。Ie9以上支持。8

<script>
	     var demo = document.querySelector(".demo");
		 console.log(demo.lastElementChild);
</script>

8，二级菜单（完整版）

   <div class="nav">
		   <ul>
			   <li>
				   <a href="">微博</a>
				   <div>
					   <a href="">私信</a>
					    <a href="">评论</a>
						 <a href="">我的</a>
				   </div>
			   </li>
	
		   </ul>
		   <div class="c"></div>
	   </div>
		<script>
		
		     var nav  = document.querySelector(".nav ul");
			 var lis = nav.children;//获得子节点
			 for(var i=0;i<lis.length;i++){
				 
				 lis[i].onmouseover = function(){
				    
					 this.children[1].style.display = "block";
				 }
				 lis[i].onmouseout = function(){
					  this.children[1].style.display = "none";
				 }
			 }

		</script>

9， nextSibling 下一个兄弟节点包含元素节点或者文本节点等等

 var nav  = document.querySelector(".nav");
		 console.log(nav.nextSibling);
		 console.log(nav.previousSibling);
 // 2. nextElementSibling 得到下一个兄弟元素节点
		 console.log(nav.nextElementSibling);
		 console.log(nav.previousElementSibling);


第二种获得元素节点有兼容问题，封装一个函数获得下一个元素节点：
   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
}

10， document.createElement(‘tagName’) 创建指定的HTML元素

<ul></ul>

<script>
		  var li  = document.createElement("li");//先创建节点
		  var ul = document.querySelector("ul");
		  ul.appendChild(li);//在添加节点到指定元素的末尾
		  li.innerHTML="123";

          lili = document.createElement('li');
		  ul.insertBefore(lili, ul.children[0]);//添加一个元素在指定子元素之前
</script>

11， node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点

<input type="button" name="" value="删除节点"/>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		
		<script>
			var btn  = document.querySelector("input");
			var ul   = document.querySelector("ul");
			btn.onclick = function(){
				if(ul.children.length==0){
					this.disabled = true;
				}else{
					ul.removeChild(ul.children[0]);
				} 
			}
		</script>

12， node.cloneNode();克隆节点括号为空或false为浅拷贝，只复制标签不复制内容，括号为true为深拷贝，复制标签也复制内容。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>