香草 Javascript 相当于 jQuery not()

Question

这就是我在 jQuery 中所做的：

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

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

我知道如何获取 javascript 中的元素，但不知道如何忽略元素和 select 其余

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>

Answer 1

尝试querySelectorAll

 var notSpans = document.getElementsByTagName('div')[0].querySelectorAll(':not(span)');

 for (var i = 0; i < notSpans.length; i++) {
   notSpans[i].style.color = 'green';
 }

<div>
  <p>not a span</p>
  <span>a span</span>
</div>

Answer 2

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

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 '';
}

Answer 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

中的复杂数据

香草 Javascript 相当于 jQuery not()

Vanilla Javascript equivalent of jQuery not()

javascript

jquery

arrays

object

javascript-objects