列出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

更新

  

＆＃34;有没有办法匹配元素id的第一部分，即＆＃39; stream-item-tweet＆＃34;？＆＃34;

是的，通过使用部分#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

无法进行实际运作的演示<​​/ strong>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

演示2

＆＃13;

＆＃13;

/* 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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;