javascript 解析 <a href> 链接中的文本

Question

假设我有

<a href="/example1">ThisTextChanges</a>
<a href="/example2">ThisTextChanges</a>
<a href="/example3">ThisTextChanges</a>
<a href="/example4">ThisTextChanges</a>

我想迭代这些并获取“ThisTextChanges”，它们是一些变化的数字，最准确地说是计时器。

我怎样才能做到这一点？ jquery 没问题。 它们位于 id 为“main_container”的 div 内。 我需要将文本放入 var 中，因此 href 对于了解我为每个变量使用哪个变量非常重要。

Answer 1

让我们将任务分解为几个步骤:

• 获取所有链接的句柄 (document.querySelectorAll)

• 了解如何获取 a 标记的当前文本 (childNode[0].nodeValue)

• 将它们放在一起(Array.from、Array.map)

获取我们所有链接的句柄:

我们将使用document.querySelectorAll来获取与我们的选择器匹配的所有节点的列表。在这里，我将使用选择器 a，但您可能有一个类来指定这些链接与页面上的其他链接:

var links = document.querySelectorAll('a');

获取链接的文本

这个有点复杂。有多种方法可以做到这一点，但更有效的方法之一是循环遍历子节点(主要是文本节点)，并为每个子节点附加 node.nodeValue。我们可能可以只使用第一个子节点的 nodeValue ，但我们将构建一个函数来循环并附加每个子节点。

function getText(link){
    var text = "";
    for (var i = 0; i < link.childNodes.length; i++){
        var n = link.childNodes[i];
        if (n && n.nodeValue){
            text += n.nodeValue;
        }
    }
    return text;   
} 

把它们放在一起

为了将它们放在一起，我们将使用 Array.map 将列表中的每个链接转换为其中的文本。这将为我们留下一个字符串数组。但是，为了能够将其传递给 Array.map，我们必须有一个数组，而 document.querySelectorAll 返回一个 NodeList 。因此，为了将其转换，我们将使用 Array.from 将 NodeList 转换为数组。

function getText(link){
    var text = "";
    for (var i = 0; i < link.childNodes.length; i++){
        var n = link.childNodes[i];
        if (n && n.nodeValue){
            text += n.nodeValue;
        }
    }
    return text;
}

var linkTexts = Array.from(document.querySelectorAll('a'))
                .map(getText);

console.log(linkTexts);

<a href="1">this is text</a>
<a href="2">this is some more text</a>