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

本文介绍了尝试将 DOMParser 与节点 js 一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am running into issues when trying to use the DOMParser in my js code. In my code, I retrieve an xml file via xmlhttp.responseText soap response. I want to be able to access its elements in JSON format, so my code looks like:

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

我收到此错误消息:ReferenceError: DOMParser 未定义

I get this error message: ReferenceError: DOMParser is not defined

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

This link hasn't worked for me because my javascript isn't in the HTML page, as it is a node.js file. JavaScript DOMParser access innerHTML and other properties

推荐答案

很多浏览器功能，比如 DOM 操作或 XHR，在 NodeJS 中是不可用的，因为这不是访问 DOM 的典型服务器任务——你会必须使用外部库才能做到这一点.

A lot of browser functionalities, like DOM manipulations or XHR, are not available natively NodeJS because that is not a typical server task to access the DOM - you'll have to use an external library to do that.

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

DOM capacities depends a lot on the library, here's a quick comparisons of the main tools you can use:

jsdom: 实现 DOM 级别 4，它是最新的 DOM 标准，所以你可以做的一切现代浏览器，你可以在 jsdom 中完成.它是在 Node 上处理浏览器内容的事实上的行业标准，被 Mocha、Vue Test Utils、Webpack Prerender SPA 插件和许多其他人使用:

jsdom: implements DOM level 4 which is the latest DOM standard, so everything that you can do on a modern browser, you can do it in jsdom. It is the de-facto industry standard for doing browser stuff on Node, used by Mocha, Vue Test Utils, Webpack Prerender SPA Plugin, and many other:

const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
dom.window.document.querySelector("p").textContent; // 'Hello world'

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

htmlparser2: same, but with enhanced performances and flexibility at the price of a more complex 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实现:

cheerio: implementation of jQuery based on HTML DOM parsing by 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

xmldom: fully implements the DOM level 2 and partially implements the DOM level 3. Works with HTML, and with XML also

dom-parser:基于正则表达式的 DOM 解析器，它实现了一些 DOM 方法，例如 getElementById.由于使用正则表达式解析 HTML 是一个非常糟糕的主意我不会不推荐这个用于生产.

dom-parser: regex-based DOM parser that implements a few DOM methods like getElementById. Since parsing HTML with regular expressions is a very bad idea I wouldn't recommend this one for production.

这篇关于尝试将 DOMParser 与节点 js 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！