Question

这就是我在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>

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（）

3 个答案: