最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

【环球时快讯】原生JS的节点操作 与 JQuey的节点操作 对比

来源：博客园

前言

公司要求不使用JQuery，而使用原生JS。


(资料图)

作为一个用惯了JQuery的人来说，用原生JS的节点操作无疑是很难用的。

这篇随笔，目的是总结对比JQuery与原生JS的各种节点操作的区别。

对比

1、创建节点

JQuery

工厂函数$，不仅可以用来获取节点，还可以创建节点。

$("这是一个测试节点");

原生JS

创建元素节点 createElement。

创建文本节点 createTextNode。

2、插入子节点

JQuery

append & appendTo

$(A).append(B); //将B追加到A中$(A).appendTo(B); //将A追加到B中

原生JS

appendChild & innerHtml & innerText

appendChildparentNode.appendChild(newNode) // 增加newNode到parentNode的末尾parentNode.innerHTML+="
  • " //增加元素节点至parentNode末尾parentNode.innerText+="Hello World" //增加文本节点至parentNode末尾

    3、插入同辈节点

    JQuery

    after & insertAfter

    $(A).after(B); // 将B插入到A之后$(A).insertAfter(B); // 将A插入到B之后

    before & insertBefore

    $(A).before(B); // 将B插入到A之前$(A).insertBefore(B); // 将A插入到B之前

    原生JS

    insertBefore

    parentNode.insertBefore(newNode, targetNode) //增加节点至targetNode之前

    原生JS没有insertAfter，如果想插入到后面，只能使用appendChild。

    总结就是，原生JS插入节点的API只有insertBefore和 appendChild。

    4、替换节点

    JQuery

    replaceWith 和 replaceAll

    $(A).replaceWith(B); // 用B替换A$(A).replaceAll(B); // 用A替换B

    注意：用已经存在的jQuery对象去替换时，替换的本质是移动而不是复制。

    原生JS

    replaceChild

    document.queryselector("div").replaceChild(Element，test);

    在div元素节点里面用element替换子节点test。

    5、复制节点

    JQuery

    clone(Boolean)

    参数为true表示会复制其事件。

    clone有副作用，就是会复制id，因此要避免去复制有id的元素。

    $(A).clone(true).appendTo(B); // 复制A节点并添加到B节点中去

    原生JS

    cloneNode(Boolean)

    参数为true，会返回Node及其全部的子孙节点。

    参数为false，则只会返回Node节点。

    var newNode = Node.cloneNode(true)

    6、删除节点

    JQuery

    remove & detach & empty

    $(A).remove(); // 删除整个A节点以及其子孙节点$(A).detach(); // 删除整个A节点，但保留元素的绑定事件、附加的数据$(A).empty(); // 清空这个节点下所有的内容

    原生JS

    removeChild

    parentNode.removeChild(childNode) //已知父节点childNode.parentNode.removeChild(childNode) //未知父节点

    7、获取兄弟节点

    JQuery

    JQuery.prev()，返回上一个兄弟节点

    JQuery.prevAll()，返回所有之前的兄弟节点

    JQuery.next()，返回下一个兄弟节点

    JQuery.nextAll()，返回所有之后的兄弟节点

    JQuery.siblings()，返回所有兄弟节点，不分前后

    原生JS

    node.nextSibling，获得下一个兄弟节点

    node.previousSibling，获得上一个兄弟节点

    8、获取子节点

    JQuery

    jQuery.children()，获取所有直接子节点

    jQuery.contents()，获取包含的所有内容，包括空文本

    $("p").find("span")，等同于$("p span")

    原生JS

    childNodes，返回的是子节点的集合，也是数组的格式，不过它会把换行和空格也当成节点信息，不推荐使用。

    children，获取子元素是最好用的，它返回的也是一个数组，并且会过滤掉一些不必要的信息，如换行、空格等。

    firstChild，获取第一个子元素，firstChild和childNodes类似，浏览器在解析它的时候的时候会把换行和空格一起解析，不推荐使用。

    firstElementChild，使用firstElementChild来获取第一个子元素，可直接获取第一个子元素，并不会将换行和空格一起解析。

    lastChild，获取最后一个子元素，其他同上。

    lastElementChild，获取最后一个子元素，其他同上。

    9、获取父节点

    JQuery

    JQuery.parent()，该方法可以获取元素的直接父节点。可以指定parent方法的参数，如 $("#test").parent("div") 来检查父节点是否满足特定的条件。

    JQuery.parents()，该方法可以获取元素所有上层节点（直到根节点）也就是祖先节点的集合。可以通过给parents方法加参数来有条件的选择祖先节点。如 $("#test").parents("div") 只返回节点标签为DIV的 上层节点集合。

    JQuery.closest()，返回被选元素的第一个祖先元素（返回包含零个或一个元素的 jQuery 对象）。祖先是父、祖父、曾祖父，依此类推。

    原生JS

    parentNode，获取的是当前元素的直接父元素。parentNode是w3c的标准。

    parentElement，parentElement和parentNode一样，只是parentElement是ie的标准。

    offsetParent，获取所有父节点，直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息。

    关键词： 兄弟节点 删除节点