Question

您好我试图一次从我的平台上删除所有jQuery。

但是我在寻找替代

方面遇到了一些麻烦

$('[data-attribute="value"]', GenericHTMLElement);

我希望它会像

那样简单

＆＃13;

var div = document.createElement('div');
div.innerHTML = '<div><span data-attribute="value"></span><span data-something-else="1000"></span></div>';
var b = div.childNodes;

var a = b.querySelector('[data-attribute="value"]');

＆＃13;

但那也不起作用。对我有什么建议吗？

Answer 1

如评论所述，

childNodes将为您提供元素列表。此列表不具有querySelector。如果你循环遍历节点，你应该能够得到它。但是，我的建议只是做div.querySelector（...）

具体而言，它将是NodeList类型。这是节点的集合。因此，您无法在其上运行querySelector。您可以循环遍历所有节点并对它们执行querySelector，或者只对父div进行此操作。

＆＃13;

var div = document.createElement('div');
div.innerHTML = '<div><span data-attribute="value">Dummy Text</span><span data-something-else="1000"></span></div>';
var b = div.childNodes;

console.log('Type of childNodes is: ', Object.prototype.toString.call(b))

// getting element using loop over childNodes
for(var i = 0; i<b.length; i++) {
  var el = b[i].querySelector('[data-attribute="value"]');
  el && console.log(el.textContent)
}

// getting element using parent elenent.
var el1 = div.querySelector('[data-attribute="value"]');
console.log(el1.textContent)

＆＃13;

Answer 2

首先，您需要了解第一个代码的作用。它搜索给定的选择器，将其限制为HTMLElementObject范围。了解我们可以尝试做类似的事情。

从MSDN示例中，他正在使用body元素：

var el = document.body.querySelector("style[type='text/css'], style:not([type])");

他们有数据属性的this示例，请看一下。

Answer 3

您的尝试无效的原因是您尝试在NodeList上调用querySelector，而NodeList没有querySelector方法。

如果您在单个元素上尝试它，它可以正常工作：

function mySelect(selector, el) {
    return el.querySelector(selector);
}

var div = document.createElement('div');
div.innerHTML = '<div><span data-attribute="value"></span><span data-something-else="1000"></span></div>';
var b = div.childNodes[0];

console.log(mySelect('[data-attribute="value"]', b));

但是，这样做mySelect(selector, el)只不过是el.querySelector(selector)的别名。

据推测，您希望能够同时评估多个元素上的选择器，并返回多个结果，如jQuery。在这种情况下，您可以通过进行一些调整来实现：

function flatMap(values, f) {
    return Array.prototype.concat.apply([], values.map(f));
}

function mySelect(selector, els) {
    return flatMap(els.length ? Array.from(els) : [els], function (el) {
        return Array.from(el.querySelectorAll(selector));
    });
}

var div = document.createElement('div');
div.innerHTML = '<div><span data-attribute="value">span 1</span><span data-something-else="1000"></span></div><div><span data-attribute="value">span 2</span></div>';

console.log(mySelect('[data-attribute="value"]', div.childNodes));

console.log(mySelect('[data-attribute="value"]', div.childNodes[0]));

$（selector，element）Native JS替代方案

3 个答案: