[英]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()並傳遞元素。
如何使用JavaScript在HTML DOM元素中查找和替換字符串
[英]How to find and replace a string in HTML DOM element using javascript
使用 JavaScript DOM 使用對象數組重寫數據屬性數組
[英]Using JavaScript DOM to rewrite an array of data attributes using an array of objects
如何在JavaScript中使用html DOM的節點關系訪問html元素
[英]How to access html element using node relationship of html DOM in javascript
是否可以使用Javascript中的DOM將數據附加到html元素中？
[英]Is it possible to append data into a html element using DOM in Javascript?
如何使用 JavaScript DOM 向網頁上的 HTML 元素添加文本
[英]How to add text to HTML element on web page using JavaScript DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.