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

【问题标题】：Get the text value of nextsibling through document.evaluate通过document.evaluate获取nextsibling的文本值
【发布时间】：2019-04-30 04:03:42
【问题描述】：

我的 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 pages ; 23. cm.”与 document.evaluate 但我错过了一些东西。问题是选择器应该是具有类属性值“SmallColHeading”的 td，并且具有（包含）格式的文本节点/值。

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 值，而这就是我们在系统中拥有的所有东西。提前致谢！

【问题讨论】：

您是否特别需要为此使用 XPath？ .getElementsByClassName() 还不够吗？
如果 .getElementsByClassName()，只要我能够获得上述文本值，我就可以接受。谢谢和欢呼！

标签： javascript html document.evaluate

【解决方案1】：

我可以通过以下代码实现结果：

 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;
            }

我应该只是通过添加“following-sibling::td”而不是添加这样的变量来遍历：“//td[contains(., 'Format')]/”而不是添加这样的变量：“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

【讨论】：

【解决方案2】：

不需要 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>，此选择器将无效。

【讨论】：

嗨！很抱歉没有在我的问题中明确说明，我添加了这一部分：问题是选择器应该是 td 类属性值“SmallColHeading”，并且具有（包含）格式的文本节点/值。因为我不确定文档结构，但我很确定它有这个：格式 vii, 201 pages ; 23 厘米。