How to iterate through HTMLCollection in Javascript

Question

I am using:

var links = document.getElementsByTagName('a');

to get all links on the page. We need to modify a few.

if I console log links, I get an HTMLCollection of 100+ a elements. If I console log links.length, it's 0.

I've tried everything I can find to convert this to an array but nothing is working.

Array.from(links)

Array.prototype.slice.call(links)

[].forEach.call(links, function (el) {...});

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

HTMLCollection.prototype.forEach = Array.prototype.forEach;

These all produce an empty array.

Additionally var links = document.querySelectorAll('a'); produces an empty NodeList.

I've run out of options. The initial links variable is very much not empty. So I don't understand why all of these suggested options don't work. Additionally, jQuery is not an option for us.

Can you reproduce the issue at stacksnippets?

guest271314
– guest271314

2018-01-23 20:00:03 +00:00
Commented Jan 23, 2018 at 20:00 — guest271314
– guest271314, Commented Jan 23, 2018 at 20:00
All of these work fine. Your problem is elsewhere.

Jordan Running
– Jordan Running

2018-01-23 20:10:58 +00:00
Commented Jan 23, 2018 at 20:10 — Jordan Running
– Jordan Running, Commented Jan 23, 2018 at 20:10

Thomas Van Holder · Accepted Answer · 2020-11-03 14:11:10Z

6

Array.from(HTML_COLLECTION).forEach(function (element) {
  console.log(element);
});

answered Nov 3, 2020 at 14:11

Thomas Van Holder

1,56514 silver badges17 bronze badges

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

Comments

einsh10 · Accepted Answer · 2018-01-23 20:06:12Z

4

this works for me

var links = document.getElementsByTagName('a');
var result = [].slice.call(links)

answered Jan 23, 2018 at 20:06

einsh10

3141 silver badge8 bronze badges

2 Comments

einsh10 Over a year ago

by the way your listed other options work as well, are you sure your problem is not in other place?

pinksharpii Over a year ago

I had to move my code to the footer, which does not make a ton of sense to me. It was able to find all the links, so why not iterate through them? unless the code is in the footer area...

jorit · Accepted Answer · 2021-08-06 23:46:30Z

1

You could also use an EventListener

window.addEventListener('load', function () {
  var links = document.getElementsByTagName('a');
  console.log(links);
}

O

answered Aug 6, 2021 at 23:46

jorit

1271 silver badge6 bronze badges

Comments

jmcgriz · Accepted Answer · 2018-01-23 20:02:37Z

0

Almost had it: var linksAsArray = Array.prototype.slice.call(links, 0)

Also, as an alternative, you can write a helper function to avoid needing to convert nodelists to arrays all of the time. For example,

function each(elems, fn){
  var i = -1;
  while(++i < elems.length){
    fn(elems[i])
  }
}

each(links, function(link){ console.log(link); })

answered Jan 23, 2018 at 20:02

jmcgriz

3,3731 gold badge11 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to iterate through HTMLCollection in Javascript

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Related