使用node.js访问DOM

Question

使用node.js访问DOM

6

我想使用node.js访问HTML文件并按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来访问DOM，所以我尝试了以下代码：

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

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

- ameni

3

Cheerio是一个简化版的jQuery实现，而不是W3C DOM API。它没有getElementById方法。如果想要使用遍历DOM树的方法，请去学习jQuery。 - Quentin

@Quentin，那我不能使用Cheerio访问DOM吗？我该如何使用Node.js访问DOM？ - ameni

1

你可以通过使用jQuery API而不是W3C DOM API来访问DOM。如果你想要W3C DOM API，那么可以寻找一个实现它的库。 - Quentin

2个回答

0

看起来你在混合客户端和服务器端的JavaScript代码。

但是为了回答你的问题，你可以通过以下方式访问src：

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

确保您先使用fs加载您的html文件

// 编辑：因为img标签是动态生成的，而不是在服务器上加载文件时立即出现的，所以您会得到“未定义”的结果。这就是我所说的将客户端代码与服务器端代码混合在一起。您可能希望获取diagramContainer $('#diagramContainer')并在其中添加一个图像标签，并设置源。 $('#diagramContainer').prepend('<img id="theImg" src="theImg.png" />')

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

- silverfighter

这个指令在我的情况下返回undefined：$('#GraphImage').attr("src") - ameni

我刚开始，不明白你的意思。 - ameni

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexandr Lazarev · Accepted Answer

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

你应该先从文件中获取html数据，然后将其传递给cheerio。正如@Quentin所提到的，cheerio是jQuery的简化版本，因此您应该使用jQuery选择器来获取特定元素。对于您的特定情况，应该使用：$("#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的工具来实现它，但事情会变得更加复杂。