Question

我想访问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>

我想使用node.js获取document.getElementById("GraphImage").src。我发现我可以使用cheerio或jsdom来访问带有node.js的DOM，因此我尝试使用cheerio代码：

var cheerio = require('cheerio'),
    $ = cheerio.load('file.html');

但是我没有找到允许我从html文件中获取image.src的指令，就像这条指令一样：document.getElementById("GraphImage").src

Answer 1

cheerio.load()接受一个字符串作为参数。通过设置：cheerio.load('file.html')，cheerio将尝试从字符串DOM实施file.html。显然，这不是你想要的。

您应首先从文件中获取html数据，然后将其传递给cheerio。同样在@Quentin中提到，cheerio是jQuery的减少实现，因此你应该使用jQuery选择器来获取ceratin元素。对于您的特定情况，它将是：$("#GraphImage")。以下是代码的外观：

 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'));   
    }

修改

此外，在您提供的html文件中，您将借助javascript将一些对象附加到DOM。如果要在服务器上访问它们，应该在那里解释javascript。您可以使用phantomjs之类的东西来实现它，但事情会变得复杂得多。

Answer 2

它看起来像您的混合客户端站点和服务器站点javascript。

但要回答您的问题，您可以通过以下方式访问src：

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

确保首先使用fs

加载html文件

// 编辑：您的'未定义'是因为img标记是动态生成的，并且在您使用服务器上的节点加载文件时不会出现。这就是我所说的将客户端代码与服务器端代码混合在一起。您可能想要获取diagramContainer $('#diagramContainer')并在其中添加图像标记并设置源。 $('#diagramContainer').prepend('<img id="theImg" src="theImg.png" />')

如果你有一个路径你可以直接设置它，如果你在服务器上生成一个png，有一个二进制流，事情会变得更加棘手。

使用node.js访问DOM

2 个答案: