原生JS的使用，包括jquery和原生JS获取节点、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")

//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

//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的目的