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

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

返回一个节点列表（有点像数组），如果您确定只有一个节点列表，那么您有两个选项

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

的返回值进行空检查，并对

.querySelector的返回值进行长度检查

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

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

[属性^=值]
表示属性名为attr的元素，其第一个值的前缀为“value”

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

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

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

let elms = document.querySelectorAll('div[class~="one"]')

for(let i=0; i<elms.length; i++)
{
console.log(elms[i].id)
}

2-如果您需要所有具有此类的元素，请使用QuerySelector，如下所示：

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

let elms = document.querySelectorAll('div[class~="one"]')

for(let i=0; i<elms.length; i++)
{
console.log(elms[i].id)
}

let elms=document.querySelectorAll（'div[class~=“one”]”）
for（让i=0；iThanks作为答案！我似乎返回null（我使用了部分解析1来解决这个问题）。可能是我将类设置为包含php中的“one”吗？它成功地使类包含字符串“one”但是，当我尝试console.log it错误时，它无法为我提供null的id。更新的答案，您需要
~=
而不是
^=
。感谢您的帮助，这很有效！非常感谢！可能是