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

Posted 南歌子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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的目的

 

三、结语

  先到这里,有补充继续。







以上是关于原生JS的使用,包括jquery和原生JS获取节点jquery和原生JS修改属性的比较的主要内容,如果未能解决你的问题,请参考以下文章

原生JS与jQuery操作DOM对比

原生js与jQuery操作DOM的区别

原生JS节点操作

原生js和Jquery操作DOM

原生JS和jQuery操作DOM的区别小结

js或jquery如何获取父级子级兄弟元素(包括祖级孙级等)