Question

我要在HTML中遍历以下表格数据：

<table id="publicationTable" cellpadding="2" cellspacing="0">
<tr>
<td vAlign="top"><IMG SRC="/images/icons/general/spacer.gif" width="20" height="1"></td>
<td class="SmallColHeading">Published     </td>
<td class="ColRow">Publisher, place and date of publication</td>
</tr>
<tr>
<td vAlign="top"><IMG SRC="/images/icons/general/spacer.gif" width="20" height="1"></td>
<td class="SmallColHeading">
Format     </td>
<td class="ColRow">
vii, 201 pages ; 23 cm.     </td>
</tr>

我要输出文本“ vii，201页； 23厘米”。与document.evaluate，但我缺少一些东西。关键是选择器应该使用类属性值“ SmallColHeading”的td进行选择，并且具有（包含）文本节点/ Format值。

var Pagination = document.evaluate("//td[contains(., 'Format')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
var Pagination2 = Pagination.nextSibling.innerHTML;
if (Pagination.singleNodeValue) {
                var Pages = Pagination.singleNodeValue.textContent;
            }
alert(Pagination2);
alert(Pages);

尤其在nextSibling之后，我正在尝试各种组合，例如删除innerHTML（我未定义）或将其替换为textContent（我无法读取属性'textContent'）。我正在努力通过HTML上的javascript遍历nextSibling，因为tr甚至没有id值，而这正是我们在系统中拥有的所有值。预先感谢！

Answer 1

不需要XPath；这可以通过 .getElementsByClassName() 和 .nextElementSibling 来简单实现：

var pagination = document.getElementsByClassName('SmallColHeading')[0];
var pagination2 = pagination.nextElementSibling;
console.log(pagination2.innerHTML.trim());

<table>
<tr>
  <td vAlign="top">
    <IMG SRC="/images/icons/general/spacer.gif" width="20" height="1" />
  </td>
  <td class="SmallColHeading">
    Format
  </td>
  <td class="ColRow">
    vii, 201 pages ; 23 cm.
  </td>
</tr>
</table>

.trim() 可用于消除任何其他空白。

请注意，<IMG>将需要一个自动关闭标签，并且需要外部<table>元素。如果不包含<table>，则表内容将直接添加到<body>中，并且选择器无效。

Answer 2

我能够通过以下代码获得结果：

 var Pages = document.evaluate("//td[contains(., 'Format')]/following-sibling::td", 
 document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
 if (Pages.singleNodeValue) {
                var pages = Pages.singleNodeValue.textContent;
            }

我应该在此之后遍历：“ // td [contains（。，'Format'）] /”通过添加“ following-sibling :: td”而不是添加如下变量：“ var Pagination2 = Pagination .nextSibling.innerHTML;”这篇帖子How to select following sibling/xml tag using xpath给了我提示以及我研究的初始链接：Javascript .querySelector find <div> by innerTEXT和这个：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript

通过document.evaluate获取nextsibling的文本值

2 个答案: