Vanilla Javascript 相当于 jQuery not()答案

【问题标题】：Vanilla Javascript equivalent of jQuery not()Vanilla Javascript 相当于 jQuery not()
【发布时间】：2015-10-23 19:21:10
【问题描述】：

这就是我在 jQuery 中所做的：

var text2 = $(node).not("span").text();
console.log(text2);

我如何在纯 javascript 中做同样的事情？

我知道如何在 javascript 中获取元素，但不知道如何忽略元素并选择其余元素

var spans = node.getElementsByTagName('span');

我需要获取node 中不包含<span> 的所有元素

这是我的 HTML

                     <tr>
                            <td>
                                <span>Farley</span>
                                <div class="table-row__expanded-content">
                                    <data-key>Sex: </data-key> <data-value>Male</data-value><br />
                                    <data-key>DOB: </data-key> <data-value>12/08/2010</data-value> <br />
                                    <data-key>Weight: </data-key> <data-value>20 lbs</data-value> <br />
                                    <data-key>Location: </data-key> <data-value>Kennel 2B</data-value> <br />
                                    <data-key>Temperament: </data-key> <data-value>Aggresive</data-value> <br />
                                    <data-key>Allergies: </data-key> <data-value>Sulfa, Penicillin, Peanuts</data-value>
                                </div>
                            </td>
                            <td>Cunningham, Stephanie</td>
                            <td>Dog</td>
                            <td>Pomeranian</td>
                            <td>PQRST1234567</td>
                        </tr>

【问题讨论】：

你不能用香草。你获取 gEBTN() 结果，循环它们，然后过滤掉你不想要的东西。
node.querySelectorAll(":not(span)")
not 不是这样做的。
一个问题是为什么？这只是一个练习吗？您的意思是节点的所有不包含跨度的直接子元素吗？
我认为没有过滤匹配它的元素的当前 jquery 对象。那么 $(node).not("span") 不会只是从该 jquery 对象中过滤出任何 span 元素，而不是查看该对象中包含 span 元素的元素吗？

标签： javascript jquery arrays object javascript-objects

【解决方案1】：

或在此页面上的控制台中运行的快速示例：

var startNode = jQuery("li.related-site").get(0); // quick jQ to get a testable node.
var spanLess = [];
var child = startNode.firstChild;
while(child){
   if(child.nodeType == 1){
       var anySpans = child.getElementsByTagName('span');
       if(!anySpans.length) spanLess.push(child);
   } 
   child = child.nextSibling;
}
spanLess;

根据您尝试提取值以与 tablesorter 一起使用的评论，您可能还会发现有用的是从节点中提取文本值的函数，而不考虑标记：

function extractText(node){
    if(node.nodeType == 3) return node.nodeValue.trim();
    if(node.nodeType == 1){
        var buf = [];
        var child = node.firstChild;
        while(child){
            var val = extractText(child);
            if(val) buf.push(val);
            child = child.nextSibling;
        }
        return buf.join(' ');
    }
    return '';
}

【讨论】：

如果子内容不在元素内怎么办？节点是并且文本直接在 spanless 的内部。
不确定我是否遵循您的问题。如果节点是 td 并且只有文本内容，那么上面的代码就可以工作。您可以忽略 var startNode... 部分，因为您的示例表明您已经有一个节点可以使用。如果您只是想轻松测试一个节点，您已经必须查看它是否有任何跨度，只需执行if(!node.getElementsByTagName('span').length){ ... process the node }
当然，如果您的需求发生变化，您必须查看课程，然后：if(!node.querySelectorAll('span.interest').length){ ... process the node }
非常感谢！我能够根据您的代码使其正常工作。看我的回答。

【解决方案3】：

感谢 bknights，我能够修改他的答案以满足我的需要。

我的全部功能如下：

    var myTextExtraction = function (node) {
    //console.log(node);

    var child = node.firstChild;
    while (child) {
        if (node.getElementsByTagName('span').length) {
            childValue = child.nextSibling.innerHTML;
            console.log(childValue);
        }
        else {
            childValue = child.nodeValue
            console.log(childValue);
        }
        return childValue;
    }
}

然后我使用 tablesorter 插件创建 node 对象：

// Load the table sorter
$(".table").tablesorter(
    {
        textExtraction: myTextExtraction
    }
);

这会循环并输出<td><span>mytext</span></td> 中的文本以及<td>myothertext<td> 中的文本。我将它用于 jquery TableSorter 插件以处理 <td>s 中的复杂数据

【讨论】：

很高兴您发现这很有帮助。如果您将我的答案标记为正确，那就太好了。此外，除非您非常确定数据的格式，否则您可能真正感兴趣的是一个从 td 中提取文本值的函数，而不管标记如何。查看我编辑的答案