jquery中.add()的等效JavaScript函数是什么?

Question

例如，对于给定的jquery代码段，什么应该是等效的javascript。JavaScript 中等效的 add 方法可能会有所帮助。

$("h1").add("span").add("h2");

正如在jquery文档中明确提到的 -.add()没有添加任何DOM元素。 https://api.jquery.com/add/所以使用，.appendChild()在这里没有达到目的

Answer 1

https://api.jquery.com/add 的文档说

"给定一个表示一组 DOM 元素的 jQuery 对象， .add(( 方法从这些对象的联合构造一个新的 jQuery 对象 元素和传递给方法的元素。".

此方法不执行任何 DOM 操作，它纯粹是用来操作 jQuery 对象的东西。因此，据我所知，不会有直接的等价物 - 如果您不使用jQuery，那么根据定义，您将无法创建或管理jQuery对象。

附言您可以随时检查该方法的 jQuery 源代码以查看它的作用。

Answer 2

这将创建一个包含页面中所有<h1>、<span>和<h2>的集合

使用vanilla js的相同元素的集合将是：

document.querySelectorAll('h1, span, h2')

我的猜测是您希望add()做与此不同的事情，但没有有关您的用例的更多详细信息，这将执行问题中显示的内容

Answer 3

仅使用本机 DOM API，您需要做更多的事情：

let collection = [];
let h1 = document.querySelectorAll("h1")
let span = document.querySelectorAll("span")
let h2 = document.querySelectorAll("h2")
collection.push([...h1]);
collection.push([...span]);
collection.push([...h2]);
console.dir(collection);

<h1>Headline 1</h1>
<p>THis will not end up in the collection (except <span>this</span>)</p>
<h2>Headline 2</h2>
<span>This closes it out.</span>