gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:06:08 24 4
gpt4 key购买 nike

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

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

最佳答案

这将解决您的问题。

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

因此,如果您有一个如下所示的 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>

关于javascript - 如何使用 JavaScript 在 HTML DOM 对象数组中通过数据选择器查找元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55532767/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com