querySelectorAll（）在Opera Mobile 11.5中不起作用？

Question

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

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

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

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 2

几个问题：

1. Juan Mendes' answer关于删除顺序是正确的。如果不反向删除，JS不仅效率低下，而且由于数组值不再有效，脚本真的有可能崩溃。如果低效的方式似乎工作了一两次，那就是运气。

2. 此外，需要考虑嵌套节点，请注意以下代码中的额外检查。

3. 代码似乎在Opera, User JavaScript之外适合您的事实表明您正在使用的节点是通过页面javascript / AJAX添加的。用计时器或类似方法补偿。

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

5. 请注意querySelectorAll() is compatible with Opera Mobile 11.5，这两个页面都是这样说的或显示问号 - 这并不意味着它不兼容，只是Mozilla没有测试它（其他人有）。请注意，可能 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 3

根据caniuse（http://caniuse.com/#search=queryselector），它应该由opera mini支持。

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