列出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很长。但它有很多带有不同ID的推文。这是一张显示我的意思的照片：

Answer 1

更新

“有没有办法匹配元素id的第一部分，即'stream-item-tweet'？”

是的，通过使用部分#id作为属性引用：

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

注意^=意味着#id的开头必须与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显示了后者是如何完成的。

---

只是猜测，因为我无法自己测试，如果这是你可以在控制台上获得的，那么你可以使用.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>