103

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

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

我收到此错误消息:ReferenceError: DOMParser is not defined

编辑:这个链接对我不起作用,因为我的 javascript 不在 HTML 页面中,因为它是一个 node.js 文件。 JavaScript DOMParser 访问 innerHTML 和其他属性

4

8 回答 8

110

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

DOM 容量很大程度上取决于库,这里是您可以使用的主要工具的快速比较:

  • jsdom: 实现了最新的 DOM 标准DOM level 4 ,所以你可以在现代浏览器上做的所有事情,你都可以在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: 基于 HTML DOM 解析的 jQuery 实现htmlparser2:

    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 是一个非常糟糕的主意,因此我不推荐将其用于生产。

于 2019-04-13T18:31:43.557 回答
17

node.js中没有DOMParser,那是浏览器的事情。您可以尝试以下任何模块:

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

于 2012-07-09T15:47:40.930 回答
15

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

var DOMParser = require('xmldom').DOMParser;
var parser = new DOMParser();
var document = parser.parseFromString('Your XML String', 'text/xml');
于 2015-12-27T08:42:17.070 回答
15

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

const jsdom = require("jsdom")
const { JSDOM } = jsdom
global.DOMParser = new JSDOM().window.DOMParser
于 2019-01-08T16:48:38.487 回答
4

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

于 2018-02-14T17:25:40.987 回答
2
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');
于 2015-07-07T12:02:26.730 回答
0

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

import { parse, stringify } from 'himalaya';

const dom = parse(htmlString)

// Do something here

const htmlStringNext = stringify(dom)
于 2021-04-27T23:26:17.597 回答
0

RSS 解析器很容易解析 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 })
    }
}
于 2021-09-22T21:42:34.207 回答