querySelectorAll() 在 Opera Mobile 11.5 中不起作用？

Question

我正在尝试使用 querySelectorAll 从网页中删除不必要的元素，但这似乎不适用于 Opera Mobile 11.5。在将脚本放到手机上之前，我已经在 PC 上试用了这些脚本。

Mozilla 的文档比较混乱，因为关于这个功能有两页，一页says it's compatible，另一页says it isn't。

有解决办法吗？我需要在我制作的这些脚本中实现其他库吗？

我想这样做：

function deleteByCSS(el) {
 elem = document.body.querySelectorAll(el);
 for (i=0; i<elem.length; i++){
  elem[i].parentNode.removeChild(elem[i]);
 }
}
deleteByCSS("here goes every CSS selector pointing to objects I want to remove");

Answer 1

几个问题：

1. Juan Mendes' answer 关于删除顺序是正确的。如果不反向删除，不仅JS效率低下，而且由于数组值不再有效而导致脚本崩溃的真正机会。如果这种低效的方法似乎能奏效一两次，那只是运气。

2. 另外，嵌套节点需要考虑在内，注意下面代码中的额外检查。

3. 代码似乎在Opera, User JavaScript 之外为您工作，这表明您正在使用的节点是由页面 javascript/AJAX 添加的。使用计时器或类似方法进行补偿。

4. 如果仍然遇到困难，链接到目标页面并发布您正在尝试的确切 CSS 选择器。

1234563请注意，document.querySelectorAll() 和 {element}.querySelectorAll() 之间可能存在差异，因此是两个页面。

把它们放在一起，这样的代码应该可以工作：

function deleteByCSS (cssSelector, delayLoopMax, delayMilliSecs) {
    //-- Use defaults, if not specified.
    var delayLoopMax    = delayLoopMax   || 0;
    var delayMilliSecs  = delayMilliSecs || 300;
    //console.log ("Args: ", cssSelector, delayLoopMax, delayMilliSecs);

    var doomedElements  = document.body.querySelectorAll (cssSelector);
    if (doomedElements  &&  doomedElements.length) {
        //console.log ("Found!");
        //-- Found the node(s); delete it/them.
        for (var J = doomedElements.length - 1;  J >= 0;  --J) {
            var doomedNode  = doomedElements[J];
            if (doomedNode) {
                doomedNode.parentNode.removeChild (doomedNode);
            }
        }
    }
    else {
        //-- Nodes not found. Wait for JS to add them, if specified.
        if (delayLoopMax > 0) {
            delayLoopMax--;
            setTimeout (
                deleteByCSS,
                delayMilliSecs,
                cssSelector, delayLoopMax, delayMilliSecs
            );
        }
    }
}

在这种情况下，将其与 20 的初始额外参数一起使用...

deleteByCSS ("*VALID* CSS selector", 20);

Answer 2

问题很可能是您在迭代它们时从列表中删除了元素。一个安全的选择是向后循环，这样，删除节点不会影响列表的其余部分

function deleteByCSS(el) {
  var elem = document.body.querySelectorAll(el);
  for (var i=elem.length - 1; i>=0; i--){
    elem[i].parentNode.removeChild(elem[i]);
  }
}

对了，别忘了在你的局部变量前加上var

Answer 3

根据caniuse (http://caniuse.com/#search=queryselector) 应该是opera mini 支持的。

无论如何，如果你想避免这种问题，甚至只是嘶嘶作响，请使用 Zepto 或 jQuery 进行 css dom 选择。 querySelectorAll 和 querySelector 显然并非所有浏览器（桌面或移动设备）都支持。在我看来，Mozilla 的 DOM api 的参考不是很好，也不是最新的。开发者确实需要一个真正完整而深入的 DOM api 文档。