Question

情景：

使用jQuery 2.0.1构建的应用程序。
您的团队更喜欢使用vanilla JavaScript。
选项包括jQuery .remove()和ChildNode.remove()。
您需要删除节点<div id="js-cancel"></div>。

var jsCancel = document.getElementById('js-cancel');

jsCancel.remove();

原始问题：我假设浏览器将使用jQuery删除元素。这是正确的，为什么？

更新了问题： Internet Explorer不支持ChildNode.remove（）。我假设浏览器将由jQuery指导它遇到什么动作时会发生.remove（）。对于支持ChildNode.remove（）的浏览器，它们是先引用jQuery还是跳过它直接进入DOM API？

Answer 1

我假设浏览器将使用jQuery删除元素

不，那是完全错误的。

浏览器永远不会“使用jQuery”。 jQuery是一个为用户编写的库，在vanilla JavaScript和DOM API之上。

jQuery将使用DOM API，反之亦然。

RE：您的更新

Internet Explorer不支持ChildNode.remove()。我假设浏览器将由jQuery引导，当它遇到.remove()时会发生什么动作

同样，那是完全错误的。

如果你直接进入DOM API，jQuery 绝对不参与。它根本不执行任何功能，除非您实际使用它作为DOM的接口。它不能“引导”浏览器做任何事情，除非你实际上使用jQuery 。如果直接访问DOM API，则有意识地选择支持jQuery。

IE中会发生的一切就是你会得到一个例外，你的页面可能会死掉。

对于支持ChildNode.remove（）的浏览器，他们首先引用jQuery还是跳过它直接转到DOM API？

不，这没有任何意义。当您调用ChildNode.remove()时，已经直接访问DOM API。如果您已经去过那里，浏览器无法选择是使用“jQuery还是跳过它直接进入DOM API”。已经完成了。

Answer 2

还要考虑Node.removeChild：

element.parentNode.removeChild(element);

它比ChildNode.remove更老（因此更受支持）。

事实上，jQuery的remove使用它：

remove: function( selector, keepData /* Internal Use Only */ ) {
  var elem,
      elems = selector ? jQuery.filter( selector, this ) : this,
      i = 0;
  for ( ; (elem = elems[i]) != null; i++ ) {
    if ( !keepData && elem.nodeType === 1 )
      jQuery.cleanData( getAll( elem ) );
    if ( elem.parentNode ) {
      if ( keepData && jQuery.contains( elem.ownerDocument, elem ) )
        setGlobalEval( getAll( elem, "script" ) );
      elem.parentNode.removeChild( elem ); // <---
    }
  }
  return this;
}

浏览器如何处理jQuery .remove（）和ChildNode.remove（）？

2 个答案: