Элементы списка из HTML XPath

Question

Мне нужно перечислить элементы, возвращенные при оценке Xpath.Я хотел бы вернуть твиты в список, чтобы я мог дополнительно оценить их элементы.Как мне это сделать?

Мой код:

var navigable_stream = '//*[@id="stream-items-id"]'; 
var FIRST_RECORD = document.evaluate(navigable_stream, document, null, XPathResult.ANY_TYPE, null).iterateNext();
console.log(FIRST_RECORD);

И возвращаемый HTML-код очень длинный.Но в нем много твитов с разными идентификаторами.Вот картинка, чтобы показать, что я имею в виду:

Answer 1

Обновление

"Есть ли способ сопоставить первую часть идентификатора элемента, например, 'stream-item-tweet"? "

Да, используя ссылку на частичный #id в качестве атрибута:

var tweet = document.querySelectorAll("[id^=stream-item-tweet]");

Обратите внимание, что ^= означает, что начало # id должноmatch stream-item-tweet

Отвечая на вопрос, я хотел бы добавить, что может быть лучшая альтернатива, используя класс каждого <li>:

var tweet = document.querySelectorAll('.js-stream-item')

Что-то выглядит недопустимым наclassList:

class="js-stream-item stream-item stream-item"

.stream-item повторяется дважды ... возможно, лучше избегать занятий в ваших обстоятельствах.

В любом случае, зная, что первый способ должен работать, а может быть, второйвозможно, tweet теперь является NodeList , который должен обрабатываться циклом или преобразовываться в массив, чтобы его можно было обработать методом массива.

Демонстрация 2 показывает, как это делается.

---

Просто догадываюсь, поскольку я не могу проверить это сам, что если tЭто то, что вы можете получить на консоли, тогда вы можете, возможно, использовать .toString(), затем проанализировать и добавить его в DOM.

---

Демо 1

Невозможно сделатьфактическое функционирование Демо

---

var navigable_stream = '//*[@id="stream-items-id"]';
var FIRST_RECORD = document.evaluate(navigable_stream, document, null, XPathResult.ANY_TYPE, null).iterateNext();
console.log(FIRST_RECORD);

var str = FIRST_RECORD.toString();

document.getElementById('dock01').insertAdjacentHTML('beforeend', str);

<section id='dock01'></section>

---

Демо 2

---

/* Collect all elements with an #id that starts with "tweet"
|| Convert NodeList into an array
*/
var tweets = Array.from(document.querySelectorAll("[id^=tweet]"));

/* filter() the array tweets
|| if an item has data-id = "retweet"
|| add it to the new array retweets
*/
var retweets = tweets.filter(function(t) {
  return t.dataset.id === "retweet";
});

console.log(retweets);

/* The lazy way to add text */

li::after {
  content: attr(id);
}


/* This is just so the console results don't obscure the Demo*/

.as-console-wrapper {
  width: 70%;
  margin-left: 30%;
}

.as-console-row:after {
  display: none !important;
}

<ol>
  <li id='tweet-51515151' data-id='retweet'></li>
  <li id='tweet-57885157' data-id='tweet'></li>
  <li id='tweet-51677459' data-id='tweet'></li>
  <li id='tweet-51890331' data-id='retweet'></li>
  <li id='tweet-51515337' data-id='retweet'></li>
  <li id='tweet-51593051' data-id='retweet'></li>
  <li id='tweet-51333333' data-id='tweet'></li>
  <li id='tweet-51534152' data-id='tweet'></li>
  <li id='tweet-51599951' data-id='tweet'></li>
  <li id='tweet-54785151' data-id='retweet'></li>
  <li id='tweet-56785199' data-id='retweet'></li>
  <li id='tweet-51557844' data-id='tweet'></li>
  <li id='tweet-51510000' data-id='retweet'></li>
</ol>