Reading an HTML NodeList into an array

Question

The sample code below currently gets an HTML page, and tries to read it into an array. The AJAX is working perfectly, and I can get a nodelist object successfully. Is it possible to somehow read this page into an array and not one singular object? Eventually I need to pull out every single member of this array individually as I am attempting in the for loop below:

$.ajax({
 url: "/thePageToScrape.html",
 dataType: 'text',
 success: function(data) {
      var elements = $("<div>").html(data)[0].getElementsByTagName("body");
      for(var i = 0; i < elements.length; i++) {
           var theText = elements.firstChild.nodeValue;
           // Do something here
      }
 }
});

elements is not an array, but a NodeList instance, there's a difference! — Elias Van Ootegem
– Elias Van Ootegem, Commented Jul 26, 2013 at 15:11
I am pulling data from a database with Javascript and I am document.write("Array of Numbers") to the screen. This is the only thing on the screen. — chatycat99
– chatycat99, Commented Jul 26, 2013 at 15:11
I am sorry, I know elements is not an array but I was hoping to make it one somehow — chatycat99
– chatycat99, Commented Jul 26, 2013 at 15:12
@user2577829: Array.prototype.slice.apply(elements, [0]); turns it into an array — Elias Van Ootegem
– Elias Van Ootegem, Commented Jul 26, 2013 at 15:14

Elias Van Ootegem · Accepted Answer · 2013-07-26 15:16:12Z

2

If all you want, like you stated in your comment, is to turn the NodeList into an array:

elements = Array.prototype.slice.apply(elements);

That's all, really.

answered Jul 26, 2013 at 15:16

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

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

5 Comments

chatycat99 Over a year ago

Yes, thank you. follow up question though, what does the [0] in this line mean exactly if it is not getting the array there? "var elements = $("<div>").html(data)[0].getElementsByTagName("body");"

MaxPRafferty Over a year ago

It is referring to the first result in the JQuery object. Even results with one node are treated as a list

Elias Van Ootegem Over a year ago

@user2577829: jQ references to dom elements are, in essence array-like objects, that wrap around a standard DOM element. By either applying $().get(0) or $()[0], you get the DOM element itself. In this case, you're applying the getElementsByTagName('body') to that DOM reference, which will either return null, or an instance of the NodeList object, never an array

chatycat99 Over a year ago

I changed this line var elements = $("<div>").html(data)[0].get("body"); to var elements = $().get(0) and when I try to console.log(elements.length); it comes up as elements in not defined

Elias Van Ootegem Over a year ago

How ahout just $("<div>").html(data)[0]? jQuery returns the body by default. I just tried this in console jQuery('<html><head></head><body><p>Foobar</p></body></html>')

MaxPRafferty · Accepted Answer · 2013-07-26 15:16:38Z

1

If you are using JQuery, you can get a list of each node immediately below the body with

var elements = $(data).children("body").children();

or every node with

var elements = $(data).children("body *");

you can then loop over them with

$.each(elements, function(index, value) {
  var text = this.text()
//..do something with text
});

answered Jul 26, 2013 at 15:16

MaxPRafferty

5,0375 gold badges35 silver badges40 bronze badges

Comments

A. Wolff · Accepted Answer · 2013-07-26 15:08:47Z

1

Looks like $.parseHTML() method do exactly what you want:

Description: Parses a string into an array of DOM nodes.

var arrElements = $.parseHTML(data);

answered Jul 26, 2013 at 15:08

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

1 Comment

chatycat99 Over a year ago

Do you know if there is an example similar to mine on stack overflow? I do not quite understand how to implement it for my case based on the link you posted

Collectives™ on Stack Overflow

Reading an HTML NodeList into an array

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related