javascript - 无法通过 fetch 方法访问 HTMLCollection Item

Question

我想从 Xbox Live 页面 ( https://support.xbox.com/de-DE/xbox-live-status ) 读取状态文本，因此显示跨度类“livestatus-banner-title”的文本。不幸的是，我总是收到 console.log(xbox_status.item(0).innerText); 的错误消息 TypeError => xbox_status.item 不是一个函数

const fetch = require('node-fetch');
const DOMParser = require('dom-parser');

fetch('https://support.xbox.com/de-DE/xbox-live-status')
  .then(function(response) {
    // When the page is loaded convert it to text
    return response.text()
    console.log(text);
  })
  .then(function(html) {
    // Initialize the DOM parser
    var parser = new DOMParser();

    // Parse the text
    var doc = parser.parseFromString(html, "text/html");

    // Auslesen der Xbox Live Dienste

    // Versuch Text über ID auszulesen
    /* let xbox_id = doc.getElementById("liveStatusBanner");
    console.log(xbox_id.getElementsByClassName("livestatus-banner-title")(0).innerText); */

    // Versuch Text direkt über "class" auszulesen
    let xbox_status = doc.getElementsByClassName('livestatus-banner-title ');
    console.log(xbox_status);
    console.log(xbox_status.item(0).innerText);

  })
  .catch(function(err) {
    console.log('Failed to fetch page: ', err);
  });

Answer 1

dom-parser 有点挑剔，所以你的第一个问题是选择器中有一个尾随空格

getElementsByClassName('livestatus-banner-title ');

第二个dom-parser不是浏览器 DOMParser 的精确副本所以 getElementsByClassName 不会返回 HTMLCollection它只返回一个数组，相当于xbox_status.item(0)就是使用括号xbox_status[0]

这也会返回 null

console.log(xbox_status.item(0).innerText);

因为 innerText 未定义，如果您查看文档，您将看到实现属性

• Node 类型
• Node 名称
• 子 Node
• 第一个 child
• 最后一个 child
• 父 Node
• 属性
• 内部HTML
• 外部HTML
• 文本内容

我建议您使用 textContent ，或者如果该元素包含其他 html 元素并且您还需要标记，请使用 innerHTML