原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一、前言

　　相比于JS这条直达终点、满是荆棘的小路，jquery无疑是康庄大道了，足够的简洁、易用给了它辉煌的地位。然而，毕竟是绕着道的插件，当小路走着走着变成大路的时候，曾经的大路也就失去了他自身的优势了。

　　原生JS虽然没有jquery那么的好用、便捷，或者说没有jquery那样让我们使用的如此顺手，甚至是无法舍弃的依赖。可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖，我们不是瘸子，我们不曾腐朽，我们还可以独立前行。

 

二、正文

1. jquery和原生JS获取节点的比较

//这是HTML代码，提供节点用于获取
<div id="divId" class="divClass">
    <input type="text" name="nickname" placeholder="请输入用户名">
    <input type="password" name="pwd" placeholder="请输入密码">
</div>

//jquery 通过$/jquery获取节点，也就是css选择器
$("#divId")
$(".divClass")
$("input[name='nickname']")

//原生JS，通过id和classname，tagname，name获取节点
document.getElementById("divId")
document.getElementsByClassName("divClass")
document.getElementsByTagName("div")
document.getElementsByName("nickname")//此项必须在节点上本身就有name属性，才可以获取

//IE8以后也有通过CSS选择器来获取的节点的
document.querySelector("#divId input")
document.querySelectorAll("div")

几点说明和注意：

• 注意getElementById中的“Element”没有复数，这是因为在id唯一的前提下，通过id获取的节点也是唯一的，所以没有复数
• 相对于通过id获取节点，通过className、tagName、name获取节点的“Element”都有复数，也就是说获取的节点存储在数组之中，无论是否唯一，所以使用节点对象时必须使用数组的下标，例如：document.getElementsByClassName("divClass")[0]
• document.querySelector("div")也是通过CSS选择器来获取节点，类似于jquery，但是当满足条件的有多个节点时，只获取第一个；
• document.querySelectorAll("div")可以获取满足条件的节点集合，无论是否唯一都是节点集合（NodeList）；
• 而$("div")能够获取所有满足条件的节点，并且无须使用数组下标即可对所有满足的节点对象进行操作，而document.querySelectorAll("div")必须使用下标。
• 相对于使用document.querySelector，使用getElementById的性能要好些，所以在选择节点相对简单时，使用后者可以提升性能（找到节点更迅速）。

2. jquery和原生JS节点对象的使用比较

//jquery  添加和删除className
$(selector).addClass("active");
$(selector).removeClass("active");


//原生JS 添加和删除className

//为 <div> 元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");
//为 <div> 元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
//为 <div> 元素移除一个类:
document.getElementById("myDIV").classList.remove("mystyle");
//为 <div> 元素移除多个类:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
//检查是否含有某个CSS类
myDiv.classList.contains('myCssClass'); //return true or false

链接：如何用原生JS删除标签中的类名和添加类名？

//jquery attr的使用 修改和添加属性
$(selector).attr("name", "nickname");//添加并设置name属性
$(selector).attr("name");//获取name属性值

//原生JS 修改和获取属性值
document.querySelector("input[type='text']").setAttribute("name", "account");
document.querySelector("input[type='text']").getAttribute("name");

//jquery 修改和获取css属性
$(selector).css("display", "none");//添加或设置CSS得display
$(selector).css("display");//获取当前的地上play的值

//原生JS 修改和获取CSS属性值
document.querySelector("input[type='text']").style.backgroundColor= "red";
;document.querySelector("input[type='text']").style.backgroundColor;

//还可以通过修改className的方式来达到修改css的目的

 3.jquery和原生JS添加节点和删除节点

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

//原生JS添加节点

document.querySelector("body").appendChild('<div>添加一个div</div>');

执行上面的代码就会报红色文字的错误，这是因为你想当然的认为jquery和原生JS的添加节点一样导致的。在原生JS中，appendChild不可以直接添加字符串，只能添加节点。

后插入节点：append()  和 appendChild

//Jquery添加节点
$("body").append('<div>添加一个div节点</div>');


//原生JS添加节点，相对要麻烦一些
var para=document.createElement("div");
var node=document.createTextNode("添加一个div节点");
para.innerHTML = "<span>这是一个span</span>"
para.appendChild(node);
para.className = "...";
document.querySelector("body").appendChild(para);

//当然，你也可以这样；这样做弊端很大，body里面其他节点会被覆盖掉

document.querySelector("body").innerHTML = '<div>添加一个div节点</div>';

这也是jquery的append和原生JS的appendChild的根本区别所在，appendChild不可以直接添加字符串，只能添加节点。

前插入节点：prepend()  和 insertBefore(newChildNode, childNode)

//Jquery添加节点，前插入，也就是在所有子节点的前面添加这个节点
$("body").prepend('<div>添加一个div节点</div>');


//原生JS添加节点，前插入insertBefore，插入在第二个参数节点的前面，此处childNode为body中的子节点。
var para=document.createElement("div");
//...
document.querySelector("body").insertBefore(para, childNode);

jquery的prepend和原生JS的insertBefore的区别就很大，

prepend插入节点到所有子节点的前面，prepend(newChildNode);

而insertBefore可以插入节点到任何子节点的前面，这也是比较方便的地方，但需要提供第二个参数，insertBefore(newChildNode, childNode);

当然，prepend可以添加字符串，而insertBefore的参数必须是节点。

删除节点：remove()  和 removeChild(childNode)

<div id="parent"> 
   <div class="first">a</div> 
   <div class="second">b</div> 
   <div class="third">c</div> 
</div>

//Jquery的删除节点
$(selector).remove();                //没有参数即删除所有符合条件的节点
$(selector).remove(".first");    　　//有参数表示删除id为first的节点


//原生JS的删除节点，需要参数，参数表示想要删除的节点
var thisNode=document.getElementsByClassName("first");
thisNode.parentNode.removeNode(thisNode);    

问题是：这样的原生JS不能够批量删除节点，怎么办？

//可以使用循环进行删除
var parent = document.getElementById("parent"); 
var childs = parent .childNodes; 
for(var i = 0; i < childs.length; i++) { 
  alert(childs[i].nodeName); 
  parent .removeChild(childs[i]); 
}

但是，在Firefox和IE中有问题，火狐会把空白部分算作节点，这样循环删除就不一定能够删除所有的节点。另外，删除节点后，索引会发生变化，导致删除出现错误。可以通过倒序删除来解决这些问题。

//原生JS循环删除节点
var parent = document.getElementById("parent"); 
var childs = parent .childNodes; 
for(var i = childs.length - 1; i >= 0; i--) { 
  alert(childs[i].nodeName); 
  childs .removeChild(childs[i]); 
}

三、结语

　　先到这里，有补充继续。