Question

我正在尝试编写一个搜索页面上所有链接的javascript，然后将它们添加到原始内容下的底部。

“Document.links”似乎做了查找部分，它也列出了它们，但它们不可点击。所以我试着添加一些html代码（startHref和endHref行），这当然打破了整个事情。

我的（非工作）脚本：

var links = document.links;
for(var i = 0; i < links.length; i++) {
  var preLink = document.createTextNode("LINK: ");
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");
  var startHref = document.createElement("a href="");
  var endHref = document.createElement(""");

  document.body.appendChild(preLink);
  document.body.appendChild(startHref);
  document.body.appendChild(linkHref);
  document.body.appendChild(endHref);
  document.body.appendChild(lineBreak);
}

如果这样可行，我还希望在每行前面列出一个数字（从1开始 - 可以在preLink部分中设置） - 如果不太难实现的话。

另外，有没有办法列出并非所有链接，只有那些匹配的东西？仅像具有特定域的链接一样。谢谢！

Answer 1

正如您已经发现的那样，您可以通过以下方式获取文档中的所有链接：

var links = document.links;

现在你有一个HTMLCollection。您可以遍历它并显示所有链接。为了更好的布局，您可以将它们放在段落（p）中。这将是循环：

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    p.appendChild(links[i]);
    document.body.appendChild(p);
}

现在所有链接都附加在页面的末尾，每个链接都在它们自己的行上，并且它们是可点击的。请试一试。

编辑：截至您的评论，如果我理解正确，您只需再添加一行：

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");

    // the following line is added
    links[i].innerHTML = links[i].href;

    p.appendChild(links[i]);
    document.body.appendChild(p);
}

该行只会将链接的内部HTML替换为属性href的值。

编辑：

变量links只指向document.links。因此，现有链接从其原始位置移除并附加到末尾。如果您尝试在for循环中创建新链接，例如document.createElement("a")，您将创建无限循环，因为您将遍历文档中的所有链接。您记得，变量links在创建时不是document.links的快照，而是指向它。

您可以通过创建数组来解决此问题：

var links = [];
// populate the array links
for (var j = 0; j < document.links.length; j++) {
    links.push(document.links[j].cloneNode());
}

现在这是页面上所有链接的快照。克隆每个链接并将其推送到数组。现在运行for循环并且原始链接不会被删除。

如果原始链接类似于：

<a href="http://example.com" id="example" class="example-class" title="click me">This is an example.</a>

它将成为：

<a href="http://example.com" id="example" class="example-class" title="click me">http://example.com</a>

但如果你只想：

<a href="http://example.com">http://example.com</a>

然后你必须调整代码：

  
for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    var a = document.createElement("a");
    a.href = links[i].href;
    a.text = links[i].href; // you can use text instead of innerHTML
    p.appendChild(a);
    document.body.appendChild(p);
}

如果要设置输出样式，可以添加如下类：

p.classList.add("my-css-class");

我希望这可以帮助您实现目标。

查找并列出所有URL作为页面底部的可点击链接

1 个答案: