Question

我正在尝试使用Greasemonkey脚本从站点检索表的内容以下是该表的外观：

<table class="OCalaisBox">
<tr class="OCalaisHeadRow">
    <td colspan="4" class="OCalaisTitleBar">Topics in this article</td>
</tr>
<tr>
    <td class="OCalaisList indexNormalText">
        <div class="OCalaisHeader">Country</div>
        <ul>
            <li><a href="/category/country/nigeria">Nigeria</a></li>
            <li><a href="/category/country/bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
        </ul>
    </td>
</tr>
</table>

我想找回“尼日利亚”和“波斯尼亚和黑塞哥维那”。

编者注：Here's a live page with this structure.

Answer 1

由于您需要文章中的国家/地区列表，因此您最简单的方法是关闭所提供的链接href。其他答案的方法适用于您的示例HTML，但在the actual page (sample)上获取了很多其他内容。

最简单（可读）的代码：

//--- Get the country links:
var cntryLinks  = document.querySelectorAll ("a[href^='/category/country/']");
//--- Extract the country names:
var nameList    = [].map.call (cntryLinks, function (cLink) {
    return cLink.textContent; 
} );
//--- Convert to text:
var countryStr  = nameList.join (", ");

//--- Display:
console.log ("Countries: " + countryStr);
alert ("Countries: " + countryStr);

请注意，该网站仅将此信息放在（大多数）新闻报道上，而不是所有网页上。

Answer 2

您可以找到CSS选择器查找的所有元素。在这个给定的案例中，以下oneliner将完成这项工作：

array = ( [].map.call(document.querySelectorAll('.OCalaisList>ul>li>a'), function(item) { return item.textContent; }));

// output the array to console (press ctrl+shift+k in Firefox)
console.log(array);

map()是Array.prototype的一种方法。 querySelectorAll()方法的返回结果是可迭代的，但实际上不是数组，并且没有自己的方法。如果您使用map()方法将其置于上下文中，call()将作为结果的方法。

querySelectorAll()会返回您指定的所有CSS选择器匹配项的NodeList。

map()在输入数组的每个元素上调用一个回调函数。回调返回一个新值，map()返回一个包含所有新值的新数组。

测试用例：

<!DOCTYPE html>
<html>
  <head>
    <title>find contents test case</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <table class="OCalaisBox" cellpadding="0" cellspacing="0">
      <tr class="OCalaisHeadRow">
        <td colspan="4" class="OCalaisTitleBar">Topics in this article</td>
      </tr>
      <tr>
        <td class="OCalaisList indexNormalText" valign=top width="25%" >
          <div class="OCalaisHeader">Country</div>
          <ul >
            <li><a href="/category/country/nigeria">Nigeria</a></li>
            <li><a href="/category/country/bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
          </ul>
        </td>
      </tr>
    </table>
  </body>

  <script>
    array = ( [].map.call(document.querySelectorAll('.OCalaisList>ul>li>a'), function(item) { return item.textContent; }));
    console.log(array);
  </script>
</html>

使用Greasemonkey获取选择表内容

2 个答案: