选择另一个特定元素之外的元素答案

【问题标题】：Select elements outside another specific element选择另一个特定元素之外的元素
【发布时间】：2016-06-13 11:46:48
【问题描述】：

我正在尝试选择一个或多个不是另一个特定元素的后代的元素。

<html>
<body>
    <div>
        <p>
            <b>
                <i> don't select me </i>
            </b>
        </p>
    </div>  
    <div> 
        <i>don't select me either </i>
    </div>  
    <i> select me </i>
    <b> 
        <i> select me too </i>
    </b>
</body>
</html>

在上面的示例中，我想选择所有 'i' 元素，它们是 not 在 div 元素中。使用 ('div i') 的另一种方法很简单，但在 :not() 中使用它是不可能的。

如何选择 div 元素之外的所有 i 元素？通常建议使用 jQuery，例如：

nondiv_i = all_i.not(all_div.find("i"))

我不能使用 jQuery，但可以使用 jqLite - jqLite 没有 not() 函数。也欢迎 jqLite 解决方案！是否可以不重复迭代和比较来做到这一点？

编辑：澄清一下，我不希望我的 i 元素有任何 div 祖先，不仅没有直接的 div 父母。

类似的 XPath 如下所示：

//i[not(ancestor::div)]

【问题讨论】：

document.querySelectorAll('body :not(div) i')
@putvande 请添加您的评论作为答案，以便 OP 希望接受它。
这个答案不起作用。它返回 不要选择我 和 也选择我。考虑它时看起来不错（选择主体，选择所有不是 div 的元素，然后抓取 i 元素），但它不起作用（这是我的问题首先来自的地方）。虽然我已经把我项目的这一部分放在一边，我并没有放弃这个问题。 :) 仍在寻找答案。

标签： javascript angularjs selenium-webdriver css-selectors jqlite

【解决方案1】：

function isDescendant(parent, child) {
    var all = parent.getElementsByTagName(child.tagName);
    for (var i = -1, l = all.length; ++i < l;) {
        if(all[i]==child){
            return true;
        }
    }
    return false;
}

针对你的具体情况；

is = document.getElementsByTagName("i");
divs = document.getElementsByTagName("div");
nondivs = [];
var contains;
for(i=0;i<is.length;i++){
    contains = false;
    for(j=0;j<divs.length;j++){
        if(isDescendant(divs[j],is[i])){
            contains = true;
            j = divs.length;
        }

    }
    if(!contains){
        nondivs.push(is[i]);
    }

}

【讨论】：

只是你可以给所有 i teg 元素类，然后 getByClass name

不要选择我

也不要选择我
选择我 也选择我

【解决方案2】：

为所有<i> 标签添加一个类（例如“itag”）。从那里，您可以通过调用getElementsByClassName 来获取它们：

var r = document.getElementsByClassName("itag");
console.log("length" + r.length);

然后您可以通过索引获取它们：

console.log(r[0]);
console.log(r[1].innerHTML); // get text of i tag

【讨论】：

通常人们不能只编辑网站并添加标签，所以这不是一个可行的答案。