前言
公司要求不使用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.previousSibling，获得上一个兄弟节点
8、获取子节点
JQuery
jQuery.children()，获取所有直接子节点
jQuery.contents()，获取包含的所有内容，包括空文本
$("p").find("span")，等同于$("p span")
原生JS
childNodes，返回的是子节点的集合，也是数组的格式，不过它会把换行和空格也当成节点信息，不推荐使用。
children，获取子元素是最好用的，它返回的也是一个数组，并且会过滤掉一些不必要的信息，如换行、空格等。
firstChild，获取第一个子元素，firstChild和childNodes类似，浏览器在解析它的时候的时候会把换行和空格一起解析，不推荐使用。
firstElementChild，使用firstElementChild来获取第一个子元素，可直接获取第一个子元素，并不会将换行和空格一起解析。
lastChild，获取最后一个子元素，其他同上。
lastElementChild，获取最后一个子元素，其他同上。
标签：JQuery,原生,parentNode,JS,获取,JQuey,节点 From： https://www.cnblogs.com/luckest/p/16991400.html