前端工程师养成计划DOM篇04-节点操作

在上一节中我们知道了如何获取以及更改标签属性以及样式，这一节我们来学习剩余的一些有关节点的操作

插入节点insertBefore

insertBefore(B,A)有两个参数，B代表要被插入的节点，A表示被插入的结点，简而言之就是想把一个节点插入到哪个节点之前，就把这个节点写在哪个节点之前。这里要注意这个方法是由父节点调用的。

拷贝节点cloneNode()

这个方法可以传一个布尔类型的参数
1.true
传入true就会拷贝当前节点以及这个节点的所有后代节点
2.false或者不传参
就会只拷贝当前节点

 <div id="wrap">
    <p class="des">你好</p>
  </div>
   <script>
   //获取div和p标签名节点
   var oWrap = document.querySelector('#wrap');
   var aDes = oWrap.querySelectorAll('.des');

	//拷贝 clone
   var copyDes = aDes[0].cloneNode();//不传参，只拷贝当前节点
	// oWrap.append(copyDes);使用append方法的话，只能添加到div所有后代元素的最后面也就相当于追加
	oWrap.insertBefore(copyDes, aDes[0])//将拷贝的节点插入到第一个p标签之前
   </script>
   

示例演练：
将第一个ul中第一个li拷贝插入到第二个ul里的第一个li前面

  <div id="wrap">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ul class="list">
      <li>1</li>

      <li>3</li>
    </ul>
  </div>
  <script>
  	//首先获取div和下面的ul集合对象
  	 var oWrap = document.querySelector('#wrap');
   	 var aUl = oWrap.querySelectorAll('.list');

	 //获取第一个ul下的第一个子元素节点对象
     var copyLi = aUl[0].children[0].cloneNode(true);
     //将获取的节点对象插入到第二个ul下的第一个子元素节点对象前面
     aUl[1].insertBefore(copyLi, aUl[1].children[0]);
  </script>

替换节点replaceChild

replaceChild(newEle,ele);有两个参数newEle和ele，newEle是新节点，ele是要被替换的节点，这里要注意这个方法同样是由父节点来调用的，
注意：如果newEle这个节点是本身就存在于页面的标签节点，而不是我们拷贝来的节点，那么就会导致像是将newEle节点剪切粘贴到ele节点的位置。
在实际开发中我们一般使用创建新节点的来替换旧的节点的方法。
示例：

<div id="wrap">
    <p class="des">被替换掉的节点</p>

    <p class="des">准备替换掉我前面那个节点</p>
    <script>
    	//获取div，所有p标签节点集合
    	var oWrap = document.querySelector('#wrap');
    	var aDes = oWrap.querySelectorAll('.des');

		//创建新节点
    	var newDes = document.createElement('p');//节点tagName为p
    	newDes.className = 'des';//节点类名为des
    	newDes.innerText = '创建的新节点来替换旧节点'
    	//替换
    	oWrap.replaceChild(newDes, aDes[0]);
    </script>
  </div>
  

移除节点removeChild

删除子元素方法，只有一个参数，就是需要被删除的子元素节点对象
注意：H5的新API remove()没有参数，由自子元素节点对象自己调用这个方法，删除自己，而removeChild()方法是由子元素的父级元素对象调用的

节点检查(has系列)

document.hasFocus(); //返回布尔值，检测文档或元素是否获取焦点
element.hasChildNodes(); //返回布尔值,检测节点对象是否包含任何子节点
element.isEqualNode(element2); //返回布尔值,判断element与element2是否是同一个节点
element.hasAttributes(); //返回布尔值,判断当前节点对象是否包含属性
element.hasAttribute(property); //返回布尔值, 判断该节点是否拥有指定的 property 属性