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

Posted 2020-11-07 南歌子

一、前言

　　相比于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的目的

 

三、结语

　　先到这里，有补充继续。