javascript - 列出来自 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

更新

" Is there a way to match the first part of the element id i.e. '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，需要通过循环处理，或者需要将其转换为数组，以便可以通过数组方法进行处理。

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

---

只是猜测，因为我无法自己测试，如果这是您可以在控制台上获得的，那么您可以使用 .toString()然后解析并将其附加到 DOM。

---

演示1

无法制作实际运行的 Demo

---

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>