Javascript filter function - Trying to understand it properly - Stack Overflow

admin管理员组

文章数量:1335825

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

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

• javascript

Share Improve this question Follow asked Apr 12, 2017 at 16:05 LbertehLberteh 17511 silver badge1616 bronze badges 2

• 3 because getElementsByClassName is not an array it is an HTML Collection – epascarello Commented Apr 12, 2017 at 16:08
• As mentioned by @epascarello, the object returned by getElementsByClassName is not an Array but a HTMLCollection object. However, you can still use Array.prototype.filter by manually setting the context because HTMLCollection exposes a similar interface as Array: so, a = Array.prototype.filter.call(fields, field => /*filter predicate*/) will work. I also want to add that the function you pass to filter in teh second example does not return a Boolean value and therefore probably does not work as you expect it to. – FK82 Commented Apr 12, 2017 at 16:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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"]'));

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.

You can convert to an array as follows

var filteredFields = [...document.getElementsByClassName("f-field")].filter(item => itemTest(item));

Find out more about the spread operator at MDN

本文标签： Javascript filter functionTrying to understand it properlyStack Overflow