Should be simple: getElementById

278 views
Skip to first unread message

Jose Bernal

unread,
May 30, 2019, 2:07:12 PM5/30/19
to jsdom
Hi trying to instantiate a simple document with an id of "my-div" and then call document.getElementById... but it always returns null.  

Shouldn't it return the DOM element of my JSDOM document?  How can I rewrite this to correctly return the my-div element?

 var jsDomDoc = new JSDOM(`<!doctype html><html><head><title>some doc</title></head>
 <body><div id="my-div" /></body></html>`);
 
 var document = jsDomDoc.window.document;


 var elem = document.getElementById("my-div");
 console.log(elem);
//returns  null

Domenic Denicola

unread,
May 30, 2019, 2:44:26 PM5/30/19
to js...@googlegroups.com

When I put the code you’ve given in a file, then add the line

 

const { JSDOM } = require("jsdom");

 

above it, and then run node file.js, I get the correct result of

 

HTMLDivElement {}

 

You can also see this in action e.g. in RunKit: https://runkit.com/domenicdenicola/5cf0246c5ba4ca001a40d7d7

 

So this should all be working fine; maybe it is something specific to your setup.

--
You received this message because you are subscribed to the Google Groups "jsdom" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsdom+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/55f505a3-c191-4192-abcf-d550395b6c37%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Godmar Back

unread,
May 30, 2019, 2:47:37 PM5/30/19
to js...@googlegroups.com

Works for me too with 15.1.1.
However, <div id="my-id" /> is not valid HTML5.

To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/BN6PR13MB1651E9C247FFF4688FBB8794DF180%40BN6PR13MB1651.namprd13.prod.outlook.com.

Jose Bernal

unread,
May 30, 2019, 2:59:04 PM5/30/19
to jsdom
You're right!  It does work for me, too.

Okay, so here's what I'm doing differently: I'm putting this inside of a jest test and running it by executing

npm run test

Here's the test code:
test('get an element by its Id', () => {
 const { JSDOM } = require("jsdom"); // add this here, instead of Jest's config file, and it works fine.

 var jsDomDoc = new JSDOM(`<!doctype html><html><head><title>some doc</title></head>
 <body><div id="my-div" /></body></html>`);
 
 var document = jsDomDoc.window.document;


 var elem = document.getElementById("my-div");
 console.log(elem);
});

Turns out, if I do the require *inside of the unit test function, the code works and it can find my div :-)  

Any idea why that would be?  Regardless, thanks for the help.


On Thursday, May 30, 2019 at 11:44:26 AM UTC-7, Domenic Denicola wrote:

When I put the code you’ve given in a file, then add the line

 

const { JSDOM } = require("jsdom");

 

above it, and then run node file.js, I get the correct result of

 

HTMLDivElement {}

 

You can also see this in action e.g. in RunKit: https://runkit.com/domenicdenicola/5cf0246c5ba4ca001a40d7d7

 

So this should all be working fine; maybe it is something specific to your setup.

 

From: js...@googlegroups.com <js...@googlegroups.com> On Behalf Of Jose Bernal
Sent: Thursday, May 30, 2019 14:07
To: jsdom <js...@googlegroups.com>
Subject: Should be simple: getElementById

 

Hi trying to instantiate a simple document with an id of "my-div" and then call document.getElementById... but it always returns null.  

 

Shouldn't it return the DOM element of my JSDOM document?  How can I rewrite this to correctly return the my-div element?

 

 var jsDomDoc = new JSDOM(`<!doctype html><html><head><title>some doc</title></head>
 <body><div id="my-div" /></body></html>`);
 
 var document = jsDomDoc.window.document;


 var elem = document.getElementById("my-div");
 console.log(elem);
//returns  null

 

--
You received this message because you are subscribed to the Google Groups "jsdom" group.

To unsubscribe from this group and stop receiving emails from it, send an email to js...@googlegroups.com.

Domenic Denicola

unread,
May 30, 2019, 3:10:27 PM5/30/19
to js...@googlegroups.com

Not sure! I don’t know much about Jest, myself.

To unsubscribe from this group and stop receiving emails from it, send an email to jsdom+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/58bb13b8-edf2-4c2f-a3b1-87a355acfcc0%40googlegroups.com.

Sebastian Mayr

unread,
Jun 1, 2019, 3:13:43 PM6/1/19
to js...@googlegroups.com
Don't instantiate your own document with jest, it automatically does that for you.

If you absolutely must instantiate your own document, set jests testEnv to node.

To unsubscribe from this group and stop receiving emails from it, send an email to jsdom+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/58bb13b8-edf2-4c2f-a3b1-87a355acfcc0%40googlegroups.com.

Sebastian Mayr

unread,
Jun 1, 2019, 3:13:44 PM6/1/19
to js...@googlegroups.com

Reply all
Reply to author
Forward
0 new messages