How can I use a Javascript variable as a DOM

Question

This is kinda hard to word so i'm hoping you understand it:

I have an entire page in a variable. I need to be able to do getElementsByClassName on it. But how?

I've tried:

$.get( base_url, function( data ) {
 var something = data.getElementsByClassName('.user_name');
});

how about data.getElementsByClassName('user_name'); no dot — bumbumpaw
– bumbumpaw, Commented Jul 21, 2014 at 8:59
Niang oh that might be it. I had user_name in a jQuery $() with the . to find classes. Let me try that real quick. — user3349060
– user3349060, Commented Jul 21, 2014 at 9:01

T.J. Crowder · Accepted Answer · 2014-07-21 09:01:31Z

4

If your URL returns HTML, data is a string. Since you're using jQuery, you can have jQuery parse it for you:

var dom = $(data);

Then you can use all the usual jQuery methods on that disconnected set of elements, so:

var userNames = dom.find(".user_name");

If you weren't using jQuery, you could have the browser parse that into elements for you:

var div = document.createElement('div');
div.innerHTML = data;

...and then use use DOM methods on that disconnected div. I wouldn't use getElementsByClassName, though; querySelectorAll has better support; basically, it's in all modern browsers and also in IE8, but IE8 doesn't have getElementsByClassName.

var userNames = div.querySelectorAll(".user_name");

edited Jul 21, 2014 at 9:01

answered Jul 21, 2014 at 9:00

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

T.J. Crowder Over a year ago

@AaronDigulla: OMG do I need more coffee.

Aaron Digulla Over a year ago

My guess is he's not aware of this fact ;-)

Matt Over a year ago

@TJ: Out of interest, how do browsers like injecting a complete HTML page (complete with doctype and <html> tags etc.) into a div`?) I'm not sure what the OP means with I have an entire page in a variable.

user3349060 Over a year ago

Well I don't need to put it in the page.

T.J. Crowder Over a year ago

@Matt: They take the descendants of head and body and put them in the div. So for instance, if you do div.innerHTML = "<!doctype html><html><head><title>Foo</title></head><body>onetwo</body></html>";, you'll end up with div.innerHTML being "<title>Foo</title>onetwo" or similar. Much better, if you're using jQuery, to use jQuery's more robust processing.

|

Mritunjay · Accepted Answer · 2014-07-21 09:00:56Z

1

You are mixing pure javascript with JQuery

Try this

 data.getElementsByClassName('user_name');

instead of

 data.getElementsByClassName('.user_name');

answered Jul 21, 2014 at 9:00

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Collectives™ on Stack Overflow

How can I use a Javascript variable as a DOM

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related