Get current browser DOM with jsdom?

Question

Is it possible to get the changed/live DOM of a website with jsdom?

For example:

Client

In my test.html file I have a button, which appends new <div class="p"> elements:

$('#button').click(function(){
 $('body').append('<div class="p">new</div>');
});

Then I have another button that calls a function on the server (with NowJS or Socket.IO).

Server

In my server.js file, now, I want to count all the appended div elements with the class="p":

everyone.now.countDiv = function() {
    var jquery = fs.readFileSync("./jquery16.js").toString();

    jsdom.env(
      {
        html: 'http://localhost:8080/test.html',
        src: [
          jquery
      ],
      done: function(errors, window) {
        var $ = window.$;
        var len = window.$('.p').length;
        console.log("Divs: ", len);
      }
    });
}

I know that I could count the elements on the client side and pass it to the server. But I am interested if jsdom can access the "new/current" DOM.

I assume jsdom reads the DOM of the text.html, but can't access the live DOM of a website!?

Please provide some greater context. Is the code above happening when you initially load the page (is it the GET), or is it when you're clicking the button in the page (POST/PUT/ajax)? — k00k, Apr 28 '12 at 18:40

score 2 · Accepted Answer · answered Apr 29 '12 at 08:22

2

Even though jsdom allows you to modify the DOM of your templates, it still remains on the server side.

The server side has nothing to do with the client side DOM, or what you call "the live DOM".

answered Apr 29 '12 at 08:22

Florian Margaine

58,730
15
91
116

score 0 · Answer 2 · answered Apr 29 '12 at 13:12

0

You may want to take a look at NowJS - http://nowjs.com/ and Socket.io - http://socket.io/ (included in NowJS).

NowJS will allow you to share functions and data from server to client and vice versa.

answered Apr 29 '12 at 13:12

k00k

17,314
13
59
86

Get current browser DOM with jsdom?

2 Answers2