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 (ie <div data-selector="9"> ) using JavaScript?
5 answers
solution1
2 2019-04-05 10:02:30
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>
solution2
2 ACCPTED 2019-04-05 16:48:17
This would solve your problem.
array.find(item => item.dataset.selector === '9');
Explanation:
Javascript allows you to use
datasetto access data attributes in html. That is, they have a pattern such asdata-*
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>
solution3
0 2019-04-05 10:05:18
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
}
}
solution4
0 2019-04-05 12:45:09
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
solution5
-1 2019-04-05 09:59:28
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.