js find object in nodeList?

Question

Fallback is irrelevant. No libraries, please.

We have an dom object reference, we'll call obj. It's actually an event.target.

We have a node list, we'll call nodes, which we've gotten with querySelectorAll and a variable selector.

nodes may have 1 or many elements, and each each of those elements may have children.

We need to determine if obj is one of those node elements, or children elements of those node elements. We're looking for "native" browser functionality here, we can totes write our own for loop and accomplish this, we are looking for alternatives.

Something like:

nodes.contains(obj) OR nodes.indexof(obj)

Solutions involving other methods of retrieving the node list to match against are acceptable, but I have no idea what those could be.

nanobar · Accepted Answer · 2022-02-16 12:13:36Z

24

If <=IE11 is not a concern then I think the cleanest is to use Array.from

Array.from(nodes).find(node => node.isEqualNode(nodeToFind));

edited Feb 16, 2022 at 12:13

answered Jan 25, 2020 at 4:13

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

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

1 Comment

Harry Robbins Over a year ago

You can use Node.isEqualNode developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode

KthProg · Accepted Answer · 2014-10-09 13:19:56Z

15

I'm not sure if this will search beyond the first level of the NodeList, but you can use this expression recursively to traverse it and check if the element 'obj' is in the NodeList 'nodes'.

[].indexOf.call(nodes, obj)

answered Oct 9, 2014 at 13:19

KthProg

2,1171 gold badge26 silver badges32 bronze badges

Comments

bfavaretto · Accepted Answer · 2012-10-19 18:49:49Z

7

I don't think there's a built-in DOM method for that. You'd need to recursively traverse your NodeList, and check for equality with your element. Another option is to use Element.querySelectorAll on each first-level elements from your NodeList (looking for your element's id, for example). I'm not sure how (inn)efficient that would be, though.

answered Oct 19, 2012 at 18:49

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

1 Comment

Randy Hall Over a year ago

Yeah this is our current school of thought as well. Well, sort of... the obj is from an event.target, so we would recurs through the parents, and match against our variable selector using matchesSelector. We have been unable to find a built-in method as well, but wanted to pick some great minds to see if we've missed.

Matt Goo · Accepted Answer · 2016-05-10 18:08:24Z

7

I did something like this:

Array.prototype.find.call(style.childNodes, function(child) {
  if(child.textContent.includes(drawer.id)) {
    console.log(child);
  }
});

Seems to work. Then child is another html node, which you can manipulate however you like.

answered May 10, 2016 at 18:08

Matt Goo

1,1361 gold badge11 silver badges13 bronze badges

Comments

aljgom · Accepted Answer · 2024-05-02 01:42:28Z

4

You can convert the NodeList to an Array to then use Array.includes() to determine whether it includes the targetNode among its entries

[...nodes].includes(targetNode)

edited May 2, 2024 at 1:42

answered Sep 16, 2022 at 18:29

aljgom

9,3873 gold badges38 silver badges30 bronze badges

1 Comment

Gert Arnold Over a year ago

Please don't post code-only answers. The main audience, future readers, will be grateful to see explained why this answers the question instead of having to infer it from the code. Also, since this is an old question, please explain how it complements all other answers.

DarkTrick · Accepted Answer · 2021-01-07 14:14:10Z

0

In addition to Dominic's answer as function:

function nodelist_contains (nodelist, obj)
{
  if (-1 < Array.from (nodelist).indexOf (obj))
    return true;
  
  return false;
}

answered Jan 7, 2021 at 14:14

DarkTrick

3,6834 gold badges33 silver badges62 bronze badges

Collectives™ on Stack Overflow

js find object in nodeList?

6 Answers 6

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related