使用node.js访问DOM
[英]Access to DOM using node.js
问题描述
i want to access to html file and get an element by id using node.js, this is my html file : 
我想访问html文件并使用node.js获取id的元素，这是我的html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram </title>
<script>
function generatePNG (oViewer) {
// some other code
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;
var sResult = generatePNG (oEditor.viewer);
});
</script>
</head>
<body >
<div id="diagramContainer"></div>
</body>
</html>
I want to do get document.getElementById("GraphImage").src but with node.js. 我想得到document.getElementById("GraphImage").src但是带有node.js. I've found that I can use cheerio or jsdom to acces the DOM with node.js, so I've tried this code with cheerio : 我发现我可以使用cheerio或jsdom来访问带有node.js的DOM ，所以我用cheerio尝试了这个代码：
var cheerio = require('cheerio'),
$ = cheerio.load('file.html');
But I didn't founnd the instruction that allow me to get the image.src from the html file, like this instruction: document.getElementById("GraphImage").src 但我没有founnd，让我得到的指示image.src从HTML文件中，这样的指令： document.getElementById("GraphImage").src
2 个解决方案
解决方案1
3 2015-12-14 14:12:21
cheerio.load() accepts a string as the argument. cheerio.load()接受一个字符串作为参数。 By setting: cheerio.load('file.html') cheerio will try to implement DOM from the string file.html . 通过设置： cheerio.load('file.html') cheerio将尝试从字符串file.html实现DOM 。 Obviously, that is not what you want. 显然，这不是你想要的。
You should get the html data from your file first, then pass it to the cheerio . 您应首先从文件中获取html数据，然后将其传递给cheerio 。 Also as @Quentin metioned, cheerio is a cut down implementation of jQuery, so you should use jQuery selectors to get a ceratin element. 同样在@Quentin中提到，cheerio是jQuery的减少实现，因此你应该使用jQuery选择器来获取ceratin元素。 For your particular case it would be: $("#GraphImage") . 对于您的特定情况，它将是： $("#GraphImage") 。 Here is how your code should look like: 以下是您的代码的外观：
var cheerio = require('cheerio'),
$ = cheerio.load('file.html'),
fs = require('fs');
fs.readFile('./index.html', function (err, html) {
if (err) {
throw err;
} else {
$ = cheerio.load(html.toString());
console.log($('#GraphImage').attr('src'));
}
EDIT: 编辑：
Also, in the html file that you have provided, you are appending some objects to the DOM with the help of javascript. 此外，在您提供的html文件中，您将借助javascript将一些对象附加到DOM。 If you want to access them on the server, the javascript should be interpreted there. 如果要在服务器上访问它们，应该在那里解释javascript。 You can use something like phantomjs to achieve it, but things get much more complicated. 你可以使用像phantomjs这样的phantomjs来实现它，但事情会变得复杂得多。
解决方案2
0 2015-12-14 14:12:32
It looks like your mixing client side and server side javascript. 它看起来像你的混合客户端和服务器端javascript。
but to answer your question you can access the src in the following way: 但要回答您的问题，您可以通过以下方式访问src：
var src = $('#GraphImage').attr("src");
make sure you first load your html file with fs 确保首先使用fs加载html文件
// EDIT: Your are getting 'undefined' because the img tag is dynamically generated and not present at the moment you are loading the file with node on the server. // 编辑：您的'未定义'因为img标记是动态生成的，并且在您使用服务器上的节点加载文件时不存在。 That's what I meant your are mixing client code with server side code. 这就是我的意思，你将客户端代码与服务器端代码混合在一起。 You might want to grab the diagramContainer $('#diagramContainer') and add an image tag inside it and set the source. 您可能想要获取diagramContainer $('#diagramContainer')并在其中添加图像标记并设置源。 $('#diagramContainer').prepend('<img id="theImg" src="theImg.png" />')
If you have a path you can set it directly if you generate the png on the server an have a binary stream things can get more tricky. 如果你有一个路径，你可以直接设置它，如果你在服务器上生成一个png，有一个二进制流，事情会变得更加棘手。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.