无法通过 fetch 方法访问 HTMLCollection Item答案

【问题标题】：Cannot get access to HTMLCollection Item via fetch method无法通过 fetch 方法访问 HTMLCollection Item
【发布时间】：2019-12-01 11:13:44
【问题描述】：

我想从 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);
  });

【问题讨论】：

您查看过原始 html 字符串是否符合您的预期？
pastebin.com/Bk6XqxXM

标签： javascript node.js parsing dom fetch

【解决方案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 是未定义的，如果您查看文档，您会看到实现属性

节点类型
节点名称
子节点
第一个孩子
最后一个孩子
父节点
属性
innerHTML
外部HTML
文本内容

我建议您使用 textContent 或者如果该元素包含其他 html 元素并且您希望标记也使用 innerHTML

【讨论】：