可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

i want to access to html file and get an element by id using node.js, this is my html file :

<!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. 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:

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

回答1:

cheerio.load() accepts a string as the argument. By setting: cheerio.load('file.html') cheerio will try to implement DOM from the string file.html. Obviously, that is not what you want.

You should get the html data from your file first, then pass it to the cheerio. Also as @Quentin metioned, cheerio is a cut down implementation of jQuery, so you should use jQuery selectors to get a ceratin element. For your particular case it would be: $("#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. If you want to access them on the server, the javascript should be interpreted there. You can use something like phantomjs to achieve it, but things get much more complicated.

回答2:

It looks like your mixing client site and server site javascript.

but to answer your question you can access the src in the following way:

 var src = $('#GraphImage').attr("src");

make sure you first load your html file with fs

// EDIT: Your are getting 'undefined' because the img tag is dynamically gernerated and not present at the moment your are loading the file with node on the server. That's what I ment 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').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.