繁体   English   中英

如何使用JavaScript在HTML DOM对象数组中通过数据选择器查找元素?

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

我有一个HTML DOM对象数组:

// 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 []

如何找到(和返回),其具有HTML对象data-selector等于9 (即<div data-selector="9">​使用JavaScript)?

您可以使用querySelectorAll函数并指定属性ie: data-selector并指定值为9

注意: querySelectorAll函数返回一个元素数组。

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

这可以解决您的问题。

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

说明:

Javascript允许您使用dataset来访问html中的数据属性。 也就是说,他们有一个模式,如data-*

所以,如果你有一个看起来像这样的html文件:

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

您可以在javascript文件中获取id为root的div

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>

您可以使用getAttribute()方法执行此操作

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

使用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';
});

基于@vaibhav kumar的getAttribute()

你可以这样做(其中array是你的HTML元素数组):

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

如果数组的data-selector属性等于"9" ,则执行函数doSomething()并传递元素。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM