Access to DOM using node.js

19,114

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.

Share:
19,114
ameni
Author by

ameni

Updated on June 15, 2022

Comments

  • ameni
    ameni almost 2 years

    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

  • ameni
    ameni over 8 years
    i'm getting undefined when i execute it
  • Alexandr Lazarev
    Alexandr Lazarev over 8 years
    One, moment. I've missed that it was added by javascript.
  • ameni
    ameni over 8 years
    thisinstruction $('#GraphImage').attr("src") return undefined in my case
  • ameni
    ameni over 8 years
    i shouldn't use phantomjs, is there other solution ?
  • ameni
    ameni over 8 years
    i just begin and i don't understand what do you mean
  • Alexandr Lazarev
    Alexandr Lazarev over 8 years
    I don't think so. Why do you need to access dom on the server?
  • ameni
    ameni over 8 years
    i need to extract the element "GraphImage" from the DOM, i'm trying with node.js because i can than do the browserify to my node.js script and get a pur javascript code and this is that i want, there is any other solution to access to the dom with javascript?
  • Alexandr Lazarev
    Alexandr Lazarev over 8 years
    And why are you doing all of this? What should be the end result?
  • ameni
    ameni over 8 years