Получить текстовое значение nextsibling через document.evaluate - PullRequest
Новая
       18

Получить текстовое значение nextsibling через document.evaluate

1 голос
/ 30 апреля 2019

У меня есть следующие данные таблицы для просмотра в моем 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. см." с документом. оценить, но я что-то упустил. Дело в том, что селектор должен иметь значение атрибута класса «SmallColHeading» и иметь (содержать) текстовый узел / значение формата. 

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'). Я борюсь с обходом nextSibling через javascript в этом HTML, так как tr даже не имеет значения id, и это все, что у нас есть в системе. Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 30 апреля 2019

Мне удалось добиться результата с помощью следующих кодов: 

 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 [содержит (., 'Формат')] /", добавив "follow-sibling :: td" вместо добавления переменной, подобной этой: "var Pagination2 = Pagination .nextSibling.innerHTML;» Этот пост Как выбрать следующий тег sibling / xml с помощью xpath дал мне подсказку, а также исходные ссылки, на которые я смотрел: Javascript .querySelector find

и это: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript

0 голосов
/ 30 апреля 2019

Нет необходимости в 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>, и этот селектор будет недействительным.

...