Menu
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
387
With the HTML DOM, all nodes in the node tree can be accessed by JavaScript. New nodes can be created, and all nodes can be modified or deleted.
The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.
Simply, you cannot. There is no DOM on the server, just a plain html source file. The "DOM" is the "Document Object Model", which is an in-memory representation of the HTML elements that were parsed by the browser. Node isn't a browser and so there is no DOM API available.
The document as a whole, the head, tables within the document, table headers, text within the table cells, and all other elements in a document are parts of the document object model for that document. They can all be accessed and manipulated using the DOM and a scripting language like JavaScript.
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.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
