【前端面试必读】js与jq操作dom的一些方法

1.创建节点

js
新的标签(元素节点) = document.createElement("标签名");
var a1 = document.createElement("li");   //创建一个li标签

jq
var $li = $('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');

2.插入节点

js
插入节点有两种方式，它们的含义是不同的。
方式1：
父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点。

方式2：
父节点.insertBefore(新的子节点,作为参考的子节点);
解释：把要插入的节点添加到指定父级里面的指定节点之前

但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

jq

jQuery中添加节点一共有4组方法，每组方法有2种方式
第一组：before()、insertBefore()
第二组：after()、insertAfter()
第三组：prepend()、prependTo()
第四组：append()、appendTo()

第一组的before()
(1)、概念：在指定节点的前面添加要添加的节点
(2)、使用方式：指定节点.before( 要添加的节点 )

$('#span2').before( $('#b2') );//在span2的前面添加b2

第一组的insertBefore()
(1)、概念：把要插入节点插入到指定节点的前面
(2)、使用方式：要插入的节点.insertBefore( 指定节点 )

 $('#b2').insertBefore( $('#span2') );//将b2插入到span2的前面

第二组的after()
(1)、概念：把要添加的节点添加到指定节点的后面
(2)、使用方式：指定节点.after( 要添加的节点 )

$('#span2').after( $('#b2') );//在span2的后面添加b2

第二组的insertAfter()
(1)、概念：把要插入的节点插入到指定节点的后面
(2)、使用方式：要插入的节点.insertAfter( 指定节点 )

 $('#b2').insertAfter( $('#span2') );//将b2插入到span2的后面

第三组的prepend()
(1)、概念：在指定父级里面的最前面添加指定节点
(2)、使用方式：父级节点.prepend( 要添加的节点 )

 $('#div2').prepend( $('#b2') );//在div2里面的最前面添加b2

第三组的prependTo()
(1)、概念：把指定节点添加到指定父级里面的最前面
(2)、使用方式：要添加的节点.prependTo( 父级节点 )

$('#b2').prependTo( $('#div2') );//将b2添加到div2里面的最前面

第四组的append()（注：此方法基本等同于原生JS的appendChild方法）
(1)、概念：在指定父级里面的最后面添加指定节点
(2)、使用方式：父级节点.append( 要添加的节点 )

$('#div2').append( $('#b2') );//在div2里面的最后面添加b2

第四组的appendTo()
(1)、概念：把指定节点添加到指定父级里面的最后面
(2)、使用方式：要添加的节点.appendTo( 父级节点 )

$('#b2').appendTo( $('#div2') );//把b2添加到div2里面的最后面

JQuery中添加节点的4组方法每组之间的区别

 $('#div2').append( $('#b2') ).css('background','red');//在div2里面的最后面添加b2，并给返回来的jquery对象加背景色

 $('#b2').appendTo( $('#div2') ).css('background','red');//把b2添加到div2里面的最后面，并给返回来的jquery对象加背景色

通过上面的2张图，可以发现，通过append()与appendTo()方法虽然都可以进行添加节点的操作，但是他们返回的jquery对象是不同的，而我们有时候要对添加节点后返回的jQuery对象进行后续操作，所以，我们在选择添加节点的方法的时候，要根据我们的实际需求来选择。

3.删除节点

js
格式如下：

父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。
如果我想删除自己这个节点，可以这么做：

node1.parentNode.removeChild(node1);

jq
1、remove（）：删除所有匹配的节点，删除后，还可以继续使用。（比如把删除的再添加进来）
2、detach（）：删除整个节点。保留元素的绑定事件、附加的数据
3、empty（）：并不是删除节点，而是清空节点内容，也就是清空元素中的所有后代节点。

4.查找节点

js

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

document.getElementsByTagName("div1")[0];    //取数组中的第一个元素

document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

jq

1.  通过id获取
$('#id')  // 通过id获取
2.  通过class获取
$('.className')  // 通过class名称获取
3.  通过标签名获取
$('div')  // 获取所有的 <div> 元素