jQuery和原生JavaScript操作方法总结

DOM元素的获得

注意：原生中的方法不是document的方法，而是所有nodeType为1的节点都有的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

jQuery3使用querySelectorAll（）得到所有元素节省了空间,使用正则和递归获得所有节点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

• 特别注意：对于form表单，加油name属性的，里面所有控件都加name属性，可以直接document打点获得。 document.myForm可以得到属性值为myform的表单，其中的控件，可以通过document.myForm.age方式获得。

DOM元素的节点关系

DOM元素的创建

$( ) 如果函数中没有< >就认为传入的是选择器；如果有< >则命令$创建孤儿节点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

原生中创建节点之后，必须添加到已有节点上才能生效，添加方法有文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

• appendChild()
• insertBefore()

insertBefore第二个参数是标杆，通常是第一个元素。insertBefore实际上要选择一个标杆，插入到这个标杆的前面，但是所有程序员都习惯把标杆设为第一个子元素。在第一个子元素之前插入，不就是插入到现有儿子之前。 jQuery中创建节点之后同样也要添加到已有节点上，添加方法有：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

• append（）
• appendTo（）
• prepend（）
• prependTo（）
• after（）
• insertAfter（）
• before（）
• insertBefore（）
• $("p").wrap("<div></div>”);
• $("p").wrapAll("<div></div>");

原生中创建三步走：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

1. 创建节点 ： var nli = document.createElement(“li”);
2. 添加内容 ： nli.innerHTML = “something”;
3. 添加到DOM树上 ： 两种方法：父元素.appendChild() 或者 父元素.insertBefore(nli , 标杆)

原生中的innerHTML可以实现添加的功能，只要将复杂DOM结构变为join字符串形式，放到innerHTML中作为添加部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

DOM元素的删除

• 原生方法

removeChild（） 必须是父节点删除子节点，不能自己删除自己文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

replaceChild（孤儿节点，被替换节点）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

• jQuery中元素的删除

remove（） 表示删除自己文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

empty（） 表示清空，等价于innerHTML = “”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

replaceAll（），replaceWith（）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

DOM元素位置的变化

原理很简单：一个DOM元素只能在DOM树有一个位置，如果它再次上树，则会移动位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

appendChild( )原理是先将元素从自己的父级上删除，再加到新的父节点上去。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

DOM元素的克隆

• 原生是cloneNode()方法，jQuery叫做clone()。

原生如果要克隆元素的所有内部元素，要加true参数（深克隆）。 oDiv.cloneNode(true)，得到的是孤儿节点，继续上树。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/1760.html

• jQuery中不能更改是否要克隆内部元素，一定是克隆的。 $().clone().appendTo();