原生JS的节点操作 与 JQuey的节点操作 对比
前言
公司要求不使用JQuery，而使用原生JS。
作为一个用惯了JQuery的人来说，用原生JS的节点操作无疑是很难用的。
这篇随笔，目的是总结对比JQuery与原生JS的各种节点操作的区别。
对比
1、创建节点
JQuery
工厂函数$，不仅可以用来获取节点，还可以创建节点。
$("<a href='javascript:void(0)'>这是一个测试节点</a>");
原生JS
创建元素节点 createElement。
创建文本节点 createTextNode。
2、插入子节点
JQuery
append & appendTo
$(A).append(B); //将B追加到A中
$(A).appendTo(B); //将A追加到B中
原生JS
appendChild & innerHtml & innerText
appendChildparentNode.appendChild(newNode) // 增加newNode到parentNode的末尾
parentNode.innerHTML+='<li></li>' //增加元素节点至parentNode末尾
parentNode.innerText+='Hello World' //增加文本节点至parentNode末尾
3、插入同辈节点
JQuery
after & insertAfter
$(A).after(B); // 将B插入到A之后
$(A).insertAfter(B); // 将A插入到B之后
before & insertBefore
$(A).before(B); // 将B插入到A之前
$(A).insertBefore(B); // 将A插入到B之前
原生JS
insertBefore
parentNode.insertBefore(newNode, targetNode) //增加节点至targetNode之前
原生JS没有insertAfter，如果想插入到后面，只能使用appendChild。
总结就是，原生JS插入节点的API只有insertBefore 和 appendChild。
4、替换节点
JQuery
replaceWith 和 replaceAll
$(A).replaceWith(B); // 用B替换A
$(A).replaceAll(B); // 用A替换B
注意：用已经存在的jQuery对象去替换时，替换的本质是移动而不是复制。
原生JS
replaceChild
document.queryselector('div').replaceChild(Element，test);
在div元素节点里面用element替换子节点test。
5、复制节点
JQuery
clone(Boolean)
参数为true表示会复制其事件。
clone有副作用，就是会复制id，因此要避免去复制有id的元素。
$(A).clone(true).appendTo(B); // 复制A节点并添加到B节点中去
原生JS
cloneNode(Boolean)
参数为true，会返回Node及其全部的子孙节点。
参数为false，则只会返回Node节点。
var newNode = Node.cloneNode(true)
6、删除节点
JQuery
remove & detach & empty
$(A).remove(); // 删除整个A节点以及其子孙节点
$(A).detach(); // 删除整个A节点，但保留元素的绑定事件、附加的数据
$(A).empty(); // 清空这个节点下所有的内容
原生JS
removeChild
parentNode.removeChild(childNode) //已知父节点
childNode.parentNode.removeChild(childNode) //未知父节点
7、获取兄弟节点
JQuery
JQuery.prev()，返回上一个兄弟节点
JQuery.prevAll()，返回所有之前的兄弟节点
JQuery.next()，返回下一个兄弟节点
JQuery.nextAll()，返回所有之后的兄弟节点
JQuery.siblings()，返回所有兄弟节点，不分前后
原生JS
node.nextSibling，获得下一个兄弟节点，浏览器在解析它的时候的时候会把换行和空格一起解析。
node.nextElementSibling，获得下一个兄弟节点，并不会将换行和空格一起解析。
node.previousSibling，获得上一个兄弟节点，浏览器在解析它的时候的时候会把换行和空格一起解析。
node.previousElementSibling，获得上一个兄弟节点，并不会将换行和空格一起解析。
8、获取子节点
JQuery
jQuery.children()，获取所有直接子节点
jQuery.contents()，获取包含的所有内容，包括空文本
$("p").find("span")，等同于$("p span")
原生JS
childNodes，返回的是子节点的集合，也是数组的格式，不过它会把换行和空格也当成节点信息，不推荐使用。
children，获取子元素是最好用的，它返回的也是一个数组，并且会过滤掉一些不必要的信息，如换行、空格等。
firstChild，获取第一个子元素，firstChild和childNodes类似，浏览器在解析它的时候的时候会把换行和空格一起解析，不推荐使用。
firstElementChild，使用firstElementChild来获取第一个子元素，可直接获取第一个子元素，并不会将换行和空格一起解析。
lastChild，获取最后一个子元素，其他同上。
lastElementChild，获取最后一个子元素，其他同上。
9、获取父节点
JQuery
JQuery.parent()，该方法可以获取元素的直接父节点。可以指定parent方法的参数，如 $("#test").parent("div") 来检查父节点是否满足特定的条件。
JQuery.parents()，该方法可以获取元素所有上层节点（直到根节点）也就是祖先节点的集合。可以通过给parents方法加参数来有条件的选择祖先节点。如 $("#test").parents("div") 只返回节点标签为DIV的 上层节点集合。
JQuery.closest()，返回被选元素的第一个祖先元素（返回包含零个或一个元素的 jQuery 对象）。祖先是父、祖父、曾祖父，依此类推。
原生JS
parentNode，获取的是当前元素的直接父元素。parentNode是w3c的标准。
parentElement，parentElement和parentNode一样，只是parentElement是ie的标准。
offsetParent，获取所有父节点，直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息。
