一、前言
相比于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的目的三、结语
先到这里，有补充继续。
原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
原文地址：https://www.cnblogs.com/nangezi/p/9068557.html