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

我有一个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 []

如何使用 JavaScript 查找(并返回(data-selector等于 9(即 <div data-selector="9">(的 HTML 对象？

这将解决您的问题。

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>

>您可以使用querySelectorAll函数并指定属性，即：data-selector并分配9的值。

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

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

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

你可以这样做使用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库马尔的getAttribute()

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

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

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

相关内容

最新更新

热门标签：