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

2023-08-28 16:50:22

一、前言

　　相比于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]);

}

三、结语

　　先到这里，有补充继续。

码农公寓