如何删除通过 Ajax 加载到 DOM 中的 querySelectorAll 匹配的所有元素的特定属性？ （使用纯 JavaScript）

Question

我想删除所有 a 元素的所有 href 属性，这些 a 元素是具有class的元素的子元素。仅适用于 JavaScript。 但我总是不这样做......

var x = document.querySelectorAll('.pickable a');

x.forEach(function(y){
    y.removeAttribute('href');
});

<div id="products">
    <div class="pickable">
        <a href="http://domain.tld/link1">Link 1</a>
    </div>
    <div class="pickable">
        <a href="http://domain.tld/link2">Link 2</a>
    </div>
    <div class="pickable">
        <a href="http://domain.tld/link3">Link 3</a>
    </div>
</div>

编辑：发布我的问题后，我看到我的代码正在运行。 谷歌搜索了几分钟后，我现在猜测我真正的问题可能是包含.pickable元素的 div通过 Ajax 加载到 DOM 中。 因此我更新了我的问题。

编辑 2：这是将元素加载到 DOM 中的代码。

function pLoad(x='') {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            document.querySelector('#products').innerHTML += this.responseText;
        }
    };
    xhttp.open('GET', '../lib/ajax/pLoad.php'+x, true);
    xhttp.send();
}
pLoad();

Answer 1

不确定您是否在问“我如何使用可挑选的 class 仅访问作为元素直接子元素的锚点？” （在这种情况下，答案是将您的选择器更改为.pickable > a ），或者如果您的问题可能涉及“为什么 querySelectorAll() 不允许我遍历所选元素？

querySelectorAll() 返回一个 NodeList，它是一个“类数组对象”，但可能不是数组。 因此，为了获得更好的兼容性，只需将其转换为数组即可。 在下面的代码片段中，我简单地将 querySelectorAll() 包裹在括号中，并使用扩展运算符将节点列表分解为新数组的元素。

 var x = [...document.querySelectorAll('.pickable > a')]; x.forEach(function(y){ y.removeAttribute('href'); });

 <div> <div class="pickable"> <a href="http://domain.tld/link1">Link 1</a> </div><div class="pickable"> <a href="http://domain.tld/link2">Link 2</a> </div><div class="pickable"> <a href="http://domain.tld/link3">Link 3</a> </div> </div>