Javascript filter function - Trying to understand it properly

Question

I'd like some help to clarify how exactly I should be using filter.

The following works just fine:

let nums = [10, 12, 15, 20]
nums.filter(num => num > 14)

result = [15, 20]

If I understand this correctly, I'm passing in a function with num as argument.

Now here's where it all gets confusing (Keep in mind I'm not an advanced js programmer)

I have an array of html elements

let fields = document.getElementsByClassName("f-field")

Every single element in the returned array contains a bunch of other html elements, it looks something like this.

<div class="f-field">
     <textarea id="9008" name="Logo"></textarea>
</div>

The inner HTML can be textareas, selects, inputs, whatever...

I tried this and it says

"fields.filter is not a function"

fields.filter(field => field.getElementsByName("Logo"))

I'm assuming that filter does not work for an Array of html elements. Or am I doing this wrong?

Thanks in advance, I'm trying to really understand javascript

Answer 1

DOM query methods like getElementsByClassName and querySelector return collections that are array-like, but not actually arrays (HTMLCollection, NodeList). They have numbered keys you can iterate over, and length properties too, but do not support array generics like filter, forEach or map.

You can cast an array-like object into an array using array = Array.from(source). If you're writing ES6, you could also use the spread operator: array = [...source]

So, you could write your code as follows:

let fields = document.querySelectorAll('.f-field');
logos = Array.from(fields).filter(field => field.getElementsByName('logo'));

Then again, why do all that filtering and traversing when you could just pass a CSS selector straight to querySelectorAll? e.g.

let logos = Array.from(document.querySelectorAll('.f-field [name="logo"]'));

Answer 2

Yup this is a little tricky. getElementsByClassName does NOT return an Array. It returns an HTMLCollection, which behaves like an array in some ways (you can iterate over it and it has a length), but does not contain most of the Array methods.