CODEWITHSUNDEEP
javascriptarraysfindselector
Backo
Backo

Reputation: 18871

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?

Upvotes: 4

Views: 5352

Answers (5)

Musonant
Musonant

Reputation: 81

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>

Upvotes: 5

Backo
Backo

Reputation: 18871

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

Upvotes: 0

Joven28
Joven28

Reputation: 769

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>

Upvotes: 2

vaku
vaku

Reputation: 712

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

Upvotes: 0

Sv443
Sv443

Reputation: 749

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.

Upvotes: -1

Related Questions