How to find an element by data selector in an array of HTML DOM objects using JavaScript?

Question

I've an array of HTML DOM objects:

// Console output

(3) […]
0: <div data-selector="5">
1: <div data-selector="9">
2: <div data-selector="2">
3: <div data-selector="6">
4: <div data-selector="13">
length: 5
<prototype>: Array []

How can I find (and return) the HTML object having data-selector equal to 9 (i.e.<div data-selector="9">) using JavaScript?

How does this array get logged? Do you have control over the code that logs the array? — Adelin
– Adelin, Commented Apr 5, 2019 at 9:56
Do you get this array from an outside source, or construct on your own (by selecting elements). If latter is the case, then its better to utilize the attribute selector and select only the desired element. That will be efficient. — 31piy
– 31piy, Commented Apr 5, 2019 at 10:09
I've no control over the code that gets the array. I get this array from an outside source. — Backo
– Backo, Commented Apr 5, 2019 at 11:33

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

This would solve your problem.

array.find(item => item.dataset.selector === '9');

Explanation:

Javascript allows you to use dataset to access data attributes in html. That is, they have a pattern such as data-*

So, if you have a html file that looks like this:

<html>
  <div id="root">
    <div data-selector="5"></div>
    <div data-selector="9"></div>
    <div data-selector="2"></div>
    <div data-selector="6"></div>
    <div data-selector="13"></div>
  </div>
</html>

You can get the div with id of root in your javascript file:

const root = document.querySelector('#root');

// get array of div elements inside root
const tagsArray = [...root.children];

// finally, retrieve the specific element you need
const selectedItem = tagsArray.find(elem => elem.dataset.selector === '9');

// A simple check
console.log(selectedItem); // => <div data-selector="9"></div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 5, 2019 at 16:48

Musonant

815 bronze badges

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

Comments

Joven28 · Accepted Answer · 2019-04-05 10:07:41Z

2

You can use querySelectorAll function and specify the attribute ie: data-selector and assign the value which is 9.

Note: The querySelectorAll function returns an array of elements.

const x = document.querySelectorAll("[data-selector='9']");
console.log(x[0].innerHTML);

<p data-selector="9">Test</p>

edited Apr 5, 2019 at 10:07

answered Apr 5, 2019 at 10:02

Joven28

7693 silver badges12 bronze badges

1 Comment

Backo Over a year ago

I get this array from an outside source and do not have control over the code that gets it.

vaku · Accepted Answer · 2019-04-05 10:05:18Z

0

You can do that Using getAttribute() method

var myArray // Let this be your array
var len = myArray.length
// Implement this logic
for(i=0;i<len;i++) {
    if(myArray[i].getAttribute('data-selector') == '9') {
        // Return myArray[i] or do what ever you want to do
    }
}

answered Apr 5, 2019 at 10:05

vaku

7129 silver badges19 bronze badges

1 Comment

Backo Over a year ago

se my answer. Thank you.

Backo · Accepted Answer · 2019-04-05 12:45:09Z

0

Use Array.find:

// Array of HTML DOM objects:
var myArray = ['<div data-selector="5">', '...', '<div data-selector="9">'];

var found = myArray.find(function(element) {
  return element.getAttribute('data-selector') === '9';
});

Based on getAttribute() by @vaibhav kumar

answered Apr 5, 2019 at 12:45

Backo

19k28 gold badges108 silver badges179 bronze badges

Comments

Sv443 · Accepted Answer · 2019-04-05 09:59:28Z

-1

You could do it like this (where array is your array of HTML elements):

array.forEach(element => {
  if(element.getAttribute("data-selector") == "9") doSomething(element);
});

If the array's data-selector attribute is equal to "9", the function doSomething() gets executed and passed the element.

answered Apr 5, 2019 at 9:59

Sv443

7491 gold badge7 silver badges27 bronze badges

1 Comment

31piy Over a year ago

It doesn't return the desired element.

Collectives™ on Stack Overflow

How to find an element by data selector in an array of HTML DOM objects using JavaScript?

5 Answers 5

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related