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

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?

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?

Share Improve this question asked Apr 5, 2019 at 9:55 Backo 18.9k28 gold badges107 silver badges177 bronze badges

How does this array get logged? Do you have control over the code that logs the array? – 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 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 Commented Apr 5, 2019 at 11:33

Add a ment |

5 Answers 5

Sorted by: Reset to default 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>

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>

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
    }
}

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

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

5 Answers 5

与本文相关的文章

评论列表(0)