获取类中包含给定字符串的元素的ID

Get the ID of an element where the class contains a given string

本文关键字：字符串 元素 ID 包含 获取      更新时间：2023-09-26

我目前正试图找出一种方法来获取元素的ID，这取决于它的类是否包含某些内容。我不确定是否有比现在更好的方法来做这件事，但环顾四周，没有什么能完全满足我的需求。我目前的代码是，我正在寻找一个div元素，它的类包含字符串"one"，但不限于此。目前只有一个元素包含这个字符串，但警报为我提供了[Object NodeList]（我可能过于复杂了）：

$idToMove = document.querySelectorAll('div[class^="one"]');
        alert($idToMove);

document.querySelectorAll()返回一个节点列表（有点像数组），如果您确定只有一个，那么您有几个选项。

1） 改为使用.querySelector：

// returns the first node that matches
var elm = document.querySelector('div[class~="one"]');
console.log(elm.id);

2） 访问返回列表中的第一个元素：

// returns all nodes that match
var elms = document.querySelectorAll('div[class~="one"]');
console.log(elms[0].id);

确保对.querySelector的返回进行空检查，对.querySelectorAll的返回进行长度检查。

还要注意，我使用的是~=，而不是^=。您可以在MDN上了解所有相等运算符之间的差异。但对于这两个：

[attr~=value]表示属性名称为attr的元素，该元素的值是一个以空格分隔的单词列表，其中一个单词正是"value"。

[attr^=值]表示属性名称为attr的元素，其第一个值以"value"为前缀。

首先从DOM获取元素，然后从该元素获取id属性：

1-如果您只需要第一个元素，那么使用querySelector，如下所示：

let elms = document.querySelector('div[class~="one"]')[0].id
console.log(elms)

2-如果你需要所有有这个类的元素，那么使用querySelectorAll，如下所示：

let elms = document.querySelectorAll('div[class~="one"]')
for(let i=0; i<elms.length; i++)
{
console.log(elms[i].id)
}

我认为*"它在更多情况下起作用

document.querySelector('div[class*="words"]')

我试过了，它的工作原理非常惊人

window.frames[0].document.querySelector('td[id*="sss"]')
相关文章：