javascript 如何使用 Node.js 访问 DOM？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34309557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access DOM using Node.js?
提问by ameni
I have an editor.htmlthat contains generatePNGfunction:
我有一个editor.html包含generatePNG功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram</title>
<script type="text/javascript" src="lib/jquery-1.8.1.js"></script>
// <!-- I use many resources -->
<script></script>
<script>
function generatePNG (oViewer) {
var oImageOptions = {
includeDecoratorLayers: false,
replaceImageURL: true
};
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var sFileName = "diagram" + h.toString() + m.toString() + s.toString() + ".png";
var sResultBlob = oViewer.generateImageBlob(function(sBlob) {
b = 64;
var reader = new window.FileReader();
reader.readAsDataURL(sBlob);
reader.onloadend = function() {
base64data = reader.result;
var image = document.createElement('img');
image.setAttribute("id", "GraphImage");
image.src = base64data;
document.body.appendChild(image);
}
}, "image/png", oImageOptions);
return sResult;
}
</script>
</head>
<body >
<div id="diagramContainer"></div>
</body>
</html>
I want to access the DOM and get image.srcusing Node.js. I find that I can work with cheerio or jsdom.
我想访问 DOM 并开始image.src使用 Node.js。我发现我可以使用cheerio 或jsdom。
I start with this:
我从这个开始：
var cheerio = require('cheerio'),
$ = cheerio.load('editor.html');
But I don't find how to access and get image.src.
但我没有找到如何访问和获取image.src.
回答by Rogier Spieker
The problem is that by loading an html file into cheerio (or any other node module) will not process the HTML as a browser does. Assets (such as stylesheets, images and javascripts) will not be loaded and/or processed as they would be within a browser.
问题是通过将 html 文件加载到cheerio（或任何其他节点模块）不会像浏览器那样处理 HTML。资产（例如样式表、图像和 javascripts）不会像在浏览器中那样加载和/或处理。
While both node.js and modern webbrowsers have the same (or similar) javascript engines, however a browser adds a lot of additional stuff, such as window, the DOM(document), etc.
Node.js does not have these concepts, so there is no window.FileReadernor document.createElement.
虽然两者的Node.js和现代化网页浏览器具有相同（或相似）的JavaScript引擎，但浏览器增添了很多额外的东西，比如window，在DOM（document）等的Node.js没有这些概念，所以没有window.FileReader也不document.createElement。
If the image is created entirely without user interaction (your code sample 'magically' receives the sBlobargument wich appears to be a string like data:<type>;<encoding>,<data>) you could use a so called headless browser on the server, PhantomJSseems most popular these days.
Then again, if no user interaction is required for the creation of the sBlob, you are probably better off using a pure node.js solution, e.g. How do I parse a data URL in Node?.
如果图像完全是在没有用户交互的情况下创建的（您的代码示例“神奇地”接收到sBlob似乎是类似字符串的参数data:<type>;<encoding>,<data>），您可以在服务器上使用所谓的无头浏览器，PhantomJS似乎是当今最流行的。再说，如果需要创建的没有用户交互sBlob，你可能最好使用纯node.js的解决方案，例如，如何解析节点中的一个数据URL？.
If there is some kind of user interaction required to create the sBlob, and you need to store it on a server, you can use pretty much the same solution as mentioned by simply sending the sBlobto the server using Ajax or a websocket, processing the sBlobinto an image and (optionally) returning the URL where to find the image.
如果是创建一些类型的用户互动的需要sBlob，你需要将其存储在服务器上，您可以通过简单地发送使用所提到几乎相同的解决方案sBlob，以使用Ajax或WebSocket的服务器，处理sBlob成图像和（可选）返回可以找到图像的 URL。
