2

我需要列出从评估 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 的推文。这是一张图片来说明我的意思： 在此处输入图像描述

4

1 回答 1

1

更新

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

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

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

注意#id^=的开头必须匹配的意思stream-item-tweet

回答了这个问题后，我想补充一点，使用 each 的类可能会有更好的选择<li>：

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

classList 上的某些内容看起来无效：

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

.stream-item重复两次......也许在你的情况下最好避免上课。

无论如何，知道第一种方式应该可以工作，也许第二种方式可能，tweet现在是一个需要由循环处理的NodeList，或者需要将其转换为数组，以便可以通过数组方法处理它。

Demo 2展示了后者是如何完成的。

只是猜测，因为我自己无法测试它，如果这是你可以在控制台上得到的，那么你可以使用.toString()then 解析并将其附加到 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>

于 2018-06-07T09:43:31.450 回答