尝试将 DOMParser 与节点 js 一起使用答案

【问题标题】：Trying to use the DOMParser with node js尝试将 DOMParser 与节点 js 一起使用
【发布时间】：2012-07-09 15:37:45
【问题描述】：

尝试在我的 js 代码中使用 DOMParser 时遇到问题。在我的代码中，我通过 xmlhttp.responseText 肥皂响应检索一个 xml 文件。我希望能够以 JSON 格式访问其元素，因此我的代码如下所示：

var xml = new DOMParser();
xml = xml.parseFromString(xmlhttp.responseText, 'text/xml');
var result = xmlToJson(xml);

我收到以下错误消息： ReferenceError: DOMParser 未定义

编辑：这个链接对我不起作用，因为我的 javascript 不在 HTML 页面中，因为它是一个 node.js 文件。 JavaScript DOMParser access innerHTML and other properties

【问题讨论】：

标签： javascript xml node.js

【解决方案1】：

许多浏览器功能，如 DOM 操作或 XHR，在 NodeJS 中不可用，因为这不是访问 DOM 的典型服务器任务 - 您必须使用外部库来执行此操作。

DOM 容量很大程度上取决于库，以下是您可以使用的主要工具的快速比较：

jsdom：实现了 DOM 级别 4，即 the latest DOM standard，因此您可以在现代浏览器上执行的所有操作，都可以在 jsdom 中执行。它是在 Node 上进行浏览器工作的事实上的行业标准，被 Mocha、Vue Test Utils、Webpack Prerender SPA Plugin 和许多其他人使用：
```
const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
dom.window.document.querySelector("p").textContent; // 'Hello world'
```

deno_dom：如果使用 Deno 代替 Node 是一个选项，这个库提供 DOM 解析能力：

import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
const parser = new DOMParser();
const document = parser.parseFromString('<p>Hello world</p>', 'text/html');
document.querySelector('p').textContent; // 'Hello world';

htmlparser2：与 jsdom 相同，但以更复杂的 API 为代价提高了性能和灵活性：

const htmlparser = require("htmlparser2");
const parser = new htmlparser.Parser({
  onopentag: (name, attrib) => {
    if (name=='p') console.log('a paragraph element is opening');
  }
}, {decodeEntities: true});
parser.write(`<!DOCTYPE html><p>Hello world</p>`);
parser.end();
// console output: 'a paragraph element is opening'

cheerio：基于htmlparser2的HTML DOM解析的jQuery实现：

const cheerio = require('cheerio');
const $ = cheerio.load(`<!DOCTYPE html><p>Hello world</p>`);
$('p').text('Bye moon');
$.html(); // '<!DOCTYPE html><p>Bye moon</p>'

xmldom：完全实现 DOM 级别 2，部分实现 DOM 级别 3。适用于 HTML，也适用于 XML
dom-parser：基于正则表达式的 DOM 解析器，实现了一些 DOM 方法，例如 getElementById。由于使用正则表达式解析 HTML 是 a very bad idea，因此我不建议将其用于生产。

【讨论】：

【解决方案2】：

node.js 中没有DOMParser，这是浏览器的问题。不过，您可以尝试以下任何模块：

https://github.com/joyent/node/wiki/modules#wiki-parsers-xml

【讨论】：

我知道这个线程很旧，但它就在这里。用于节点的 jquery 怎么样？使用 dataType xml 的 ajax 调用应该收到一个 xml dom 响应。

【解决方案3】：

您可以使用 DOMParser 的 Node 实现，例如 xmldom。这将允许您在浏览器之外访问 DOMParser。例如：

var DOMParser = require('xmldom').DOMParser;
var parser = new DOMParser();
var document = parser.parseFromString('Your XML String', 'text/xml');

【讨论】：

它不起作用 - 在尝试解析 html 页面时会吐出很多错误“未找到实体”
xmldom 是一个旧库。不支持 querySelector
xmldom 是 DOMParser 的糟糕替代品。它没有正确解析对等元素。
它满足了我的需求，因为我实际上正在实现这个逻辑！谢谢，gist.github.com/chinchang/8106a82c56ad007e27b1

【解决方案4】：

我使用了jsdom，因为它被大量使用并且是由一位著名的网络英雄编写的 - 没有保证它的行为与您的浏览器完全匹配（或者甚至每个浏览器的行为都是相同的），但它对我有用：

const jsdom = require("jsdom")
const { JSDOM } = jsdom
global.DOMParser = new JSDOM().window.DOMParser

【讨论】：

【解决方案5】：

我真的很喜欢htmlparser2。这是一个很棒的、快速的、轻量级的库。我创建了一个关于如何在 RunKit 上使用它的小演示：https://runkit.com/jfahrenkrug/htmlparser2-demo/1.0.0

【讨论】：

【解决方案6】：

var DOMParser = require('xmldom').DOMParser;
var doc = new DOMParser().parseFromString(
    '<xml xmlns="a" xmlns:c="./lite">\n'+
        '\t<child>test</child>\n'+
        '\t<child></child>\n'+
        '\t<child/>\n'+
    '</xml>'
    ,'text/xml');

【讨论】：

【解决方案7】：

我使用另一个 DOM 解析器从 html 字符串到 DOM 并返回 > Himalaya，或npmjs.com：

import { parse, stringify } from 'himalaya';

const dom = parse(htmlString)

// Do something here

const htmlStringNext = stringify(dom)

【讨论】：

【解决方案8】：

RSS parser 很容易解析 Atom 提要。例如，我使用的是 NextJs，您可以像这样简单地创建一个 API：

import Parser from 'rss-parser'

export default async function API(req, res) {
    let parser = new Parser();
    try {
        const feed = await parser.parseURL(`https://www.nasa.gov/rss/dyn/lg_image_of_the_day.rss`);
        if (feed) return res.json({ "message": `Here is your data feed title`, status: 200, data: feed.title })
    } catch (error) {
        return res.json({ "message": "You made an invalid request", status: 401 })
    }
}

【讨论】：